From b41c35a2c1c9956ae4e302fc0348a07b6edcd301 Mon Sep 17 00:00:00 2001
From: Kailash Devrari <devrari@gmail.com>
Date: Wed, 25 Oct 2023 01:59:03 +0530
Subject: [PATCH 1/3] fixed auto submit form when enter key pressed in
 selection modals

---
 .../NewDatePicker/CalendarPicker/YearPickerModal.js           | 1 +
 src/components/SelectionList/BaseSelectionList.js             | 2 ++
 src/components/SelectionList/selectionListPropTypes.js        | 3 +++
 src/components/StatePicker/StateSelectorModal.js              | 1 +
 src/components/ValuePicker/ValueSelectorModal.js              | 1 +
 src/hooks/useKeyboardShortcut.js                              | 4 +++-
 src/libs/KeyboardShortcut/bindHandlerToKeydownEvent/index.js  | 4 +++-
 src/libs/KeyboardShortcut/index.js                            | 4 +++-
 8 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js b/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js
index 9825109fbb63..1ceddfdc4778 100644
--- a/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js
+++ b/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js
@@ -82,6 +82,7 @@ function YearPickerModal(props) {
                     onSelectRow={(option) => props.onYearChange(option.value)}
                     initiallyFocusedOptionKey={props.currentYear.toString()}
                     showScrollIndicator
+                    shouldStopPropagation
                 />
             </ScreenWrapper>
         </Modal>
diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js
index fdb1f92ca73b..db590d5e5439 100644
--- a/src/components/SelectionList/BaseSelectionList.js
+++ b/src/components/SelectionList/BaseSelectionList.js
@@ -57,6 +57,7 @@ function BaseSelectionList({
     inputRef = null,
     disableKeyboardShortcuts = false,
     children,
+    shouldStopPropagation = false,
 }) {
     const {translate} = useLocalize();
     const firstLayoutRef = useRef(true);
@@ -339,6 +340,7 @@ function BaseSelectionList({
     useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, selectFocusedOption, {
         captureOnInputs: true,
         shouldBubble: () => !flattenedSections.allOptions[focusedIndex],
+        shouldStopPropagation,
         isActive: !disableKeyboardShortcuts && !disableEnterShortcut && isFocused,
     });
 
diff --git a/src/components/SelectionList/selectionListPropTypes.js b/src/components/SelectionList/selectionListPropTypes.js
index e75335e39b23..a0fb36bee917 100644
--- a/src/components/SelectionList/selectionListPropTypes.js
+++ b/src/components/SelectionList/selectionListPropTypes.js
@@ -168,6 +168,9 @@ const propTypes = {
     /** Whether to show the default confirm button */
     showConfirmButton: PropTypes.bool,
 
+    /** Whether to stop automatic form submission on pressing enter key or not */
+    shouldStopPropagation : PropTypes.bool,
+
     /** Whether to prevent default focusing of options and focus the textinput when selecting an option */
     shouldPreventDefaultFocusOnSelectRow: PropTypes.bool,
 
diff --git a/src/components/StatePicker/StateSelectorModal.js b/src/components/StatePicker/StateSelectorModal.js
index 378dcc4ebc8b..21ffea5bbdf8 100644
--- a/src/components/StatePicker/StateSelectorModal.js
+++ b/src/components/StatePicker/StateSelectorModal.js
@@ -99,6 +99,7 @@ function StateSelectorModal({currentState, isVisible, onClose, onStateSelected,
                     onSelectRow={onStateSelected}
                     onChangeText={setSearchValue}
                     initiallyFocusedOptionKey={currentState}
+                    shouldStopPropagation
                 />
             </ScreenWrapper>
         </Modal>
diff --git a/src/components/ValuePicker/ValueSelectorModal.js b/src/components/ValuePicker/ValueSelectorModal.js
index 23aac4839d2a..3f2a05dd170c 100644
--- a/src/components/ValuePicker/ValueSelectorModal.js
+++ b/src/components/ValuePicker/ValueSelectorModal.js
@@ -71,6 +71,7 @@ function ValueSelectorModal({currentValue, items, selectedItem, label, isVisible
                     sections={[{data: sectionsData}]}
                     onSelectRow={onItemSelected}
                     initiallyFocusedOptionKey={currentValue}
+                    shouldStopPropagation
                 />
             </ScreenWrapper>
         </Modal>
diff --git a/src/hooks/useKeyboardShortcut.js b/src/hooks/useKeyboardShortcut.js
index b8e297c966ed..d42727f5fb4a 100644
--- a/src/hooks/useKeyboardShortcut.js
+++ b/src/hooks/useKeyboardShortcut.js
@@ -21,6 +21,7 @@ export default function useKeyboardShortcut(shortcut, callback, config = {}) {
         // Hence the use of CONST.EMPTY_ARRAY.
         excludedNodes = CONST.EMPTY_ARRAY,
         isActive = true,
+        shouldStopPropagation =false
     } = config;
 
     useEffect(() => {
@@ -35,8 +36,9 @@ export default function useKeyboardShortcut(shortcut, callback, config = {}) {
                 priority,
                 shouldPreventDefault,
                 excludedNodes,
+                shouldStopPropagation,
             );
         }
         return () => {};
-    }, [isActive, callback, captureOnInputs, excludedNodes, priority, shortcut.descriptionKey, shortcut.modifiers, shortcut.shortcutKey, shouldBubble, shouldPreventDefault]);
+    }, [isActive, callback, captureOnInputs, excludedNodes, priority, shortcut.descriptionKey, shortcut.modifiers, shortcut.shortcutKey, shouldBubble, shouldPreventDefault, shouldStopPropagation]);
 }
diff --git a/src/libs/KeyboardShortcut/bindHandlerToKeydownEvent/index.js b/src/libs/KeyboardShortcut/bindHandlerToKeydownEvent/index.js
index 7b1cb00a408b..f4c5d24b0302 100644
--- a/src/libs/KeyboardShortcut/bindHandlerToKeydownEvent/index.js
+++ b/src/libs/KeyboardShortcut/bindHandlerToKeydownEvent/index.js
@@ -42,7 +42,9 @@ function bindHandlerToKeydownEvent(getDisplayName, eventHandlers, keycommandEven
         if (callback.shouldPreventDefault) {
             event.preventDefault();
         }
-
+        if (callback.shouldStopPropagation) {
+            event.stopPropagation();
+        }
         // If the event should not bubble, short-circuit the loop
         return shouldBubble;
     });
diff --git a/src/libs/KeyboardShortcut/index.js b/src/libs/KeyboardShortcut/index.js
index bce65744801c..1fc2c3b276ec 100644
--- a/src/libs/KeyboardShortcut/index.js
+++ b/src/libs/KeyboardShortcut/index.js
@@ -116,9 +116,10 @@ function getPlatformEquivalentForKeys(keys) {
  * @param {Number} [priority] The position the callback should take in the stack. 0 means top priority, and 1 means less priority than the most recently added.
  * @param {Boolean} [shouldPreventDefault] Should call event.preventDefault after callback?
  * @param {Array<String>} [excludedNodes] Do not capture key events targeting excluded nodes (i.e. do not prevent default and let the event bubble)
+ * @param {Boolean} [shouldStopPropagation] Should call event.stopPropagation after callback?
  * @returns {Function} clean up method
  */
-function subscribe(key, callback, descriptionKey, modifiers = 'shift', captureOnInputs = false, shouldBubble = false, priority = 0, shouldPreventDefault = true, excludedNodes = []) {
+function subscribe(key, callback, descriptionKey, modifiers = 'shift', captureOnInputs = false, shouldBubble = false, priority = 0, shouldPreventDefault = true, excludedNodes = [], shouldStopPropagation = false) {
     const platformAdjustedModifiers = getPlatformEquivalentForKeys(modifiers);
     const displayName = getDisplayName(key, platformAdjustedModifiers);
     if (!_.has(eventHandlers, displayName)) {
@@ -133,6 +134,7 @@ function subscribe(key, callback, descriptionKey, modifiers = 'shift', captureOn
         shouldPreventDefault,
         shouldBubble,
         excludedNodes,
+        shouldStopPropagation,
     });
 
     if (descriptionKey) {

From 1ffa1d02bdaddb05f42a3ff3a8024d17cb46851f Mon Sep 17 00:00:00 2001
From: Kailash Devrari <devrari@gmail.com>
Date: Thu, 26 Oct 2023 18:56:45 +0530
Subject: [PATCH 2/3] prettier fixes

---
 .../SelectionList/selectionListPropTypes.js      |  2 +-
 src/hooks/useKeyboardShortcut.js                 | 16 ++++++++++++++--
 src/libs/KeyboardShortcut/index.js               | 13 ++++++++++++-
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/components/SelectionList/selectionListPropTypes.js b/src/components/SelectionList/selectionListPropTypes.js
index a0fb36bee917..f92cdf7dd837 100644
--- a/src/components/SelectionList/selectionListPropTypes.js
+++ b/src/components/SelectionList/selectionListPropTypes.js
@@ -169,7 +169,7 @@ const propTypes = {
     showConfirmButton: PropTypes.bool,
 
     /** Whether to stop automatic form submission on pressing enter key or not */
-    shouldStopPropagation : PropTypes.bool,
+    shouldStopPropagation: PropTypes.bool,
 
     /** Whether to prevent default focusing of options and focus the textinput when selecting an option */
     shouldPreventDefaultFocusOnSelectRow: PropTypes.bool,
diff --git a/src/hooks/useKeyboardShortcut.js b/src/hooks/useKeyboardShortcut.js
index d42727f5fb4a..684da41c7b59 100644
--- a/src/hooks/useKeyboardShortcut.js
+++ b/src/hooks/useKeyboardShortcut.js
@@ -21,7 +21,7 @@ export default function useKeyboardShortcut(shortcut, callback, config = {}) {
         // Hence the use of CONST.EMPTY_ARRAY.
         excludedNodes = CONST.EMPTY_ARRAY,
         isActive = true,
-        shouldStopPropagation =false
+        shouldStopPropagation = false,
     } = config;
 
     useEffect(() => {
@@ -40,5 +40,17 @@ export default function useKeyboardShortcut(shortcut, callback, config = {}) {
             );
         }
         return () => {};
-    }, [isActive, callback, captureOnInputs, excludedNodes, priority, shortcut.descriptionKey, shortcut.modifiers, shortcut.shortcutKey, shouldBubble, shouldPreventDefault, shouldStopPropagation]);
+    }, [
+        isActive,
+        callback,
+        captureOnInputs,
+        excludedNodes,
+        priority,
+        shortcut.descriptionKey,
+        shortcut.modifiers,
+        shortcut.shortcutKey,
+        shouldBubble,
+        shouldPreventDefault,
+        shouldStopPropagation,
+    ]);
 }
diff --git a/src/libs/KeyboardShortcut/index.js b/src/libs/KeyboardShortcut/index.js
index 1fc2c3b276ec..e430e076ccd8 100644
--- a/src/libs/KeyboardShortcut/index.js
+++ b/src/libs/KeyboardShortcut/index.js
@@ -119,7 +119,18 @@ function getPlatformEquivalentForKeys(keys) {
  * @param {Boolean} [shouldStopPropagation] Should call event.stopPropagation after callback?
  * @returns {Function} clean up method
  */
-function subscribe(key, callback, descriptionKey, modifiers = 'shift', captureOnInputs = false, shouldBubble = false, priority = 0, shouldPreventDefault = true, excludedNodes = [], shouldStopPropagation = false) {
+function subscribe(
+    key,
+    callback,
+    descriptionKey,
+    modifiers = 'shift',
+    captureOnInputs = false,
+    shouldBubble = false,
+    priority = 0,
+    shouldPreventDefault = true,
+    excludedNodes = [],
+    shouldStopPropagation = false,
+) {
     const platformAdjustedModifiers = getPlatformEquivalentForKeys(modifiers);
     const displayName = getDisplayName(key, platformAdjustedModifiers);
     if (!_.has(eventHandlers, displayName)) {

From bf0a9128bcebed1c63123c8c5aff2f682846c3a9 Mon Sep 17 00:00:00 2001
From: Kailash Devrari <devrari@gmail.com>
Date: Sat, 28 Oct 2023 18:58:46 +0530
Subject: [PATCH 3/3] updated code because of TS changes

---
 src/libs/KeyboardShortcut/index.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/libs/KeyboardShortcut/index.ts b/src/libs/KeyboardShortcut/index.ts
index 3109ccda8aaf..65d50b403060 100644
--- a/src/libs/KeyboardShortcut/index.ts
+++ b/src/libs/KeyboardShortcut/index.ts
@@ -13,6 +13,7 @@ type EventHandler = {
     shouldPreventDefault: boolean;
     shouldBubble: boolean | (() => void);
     excludedNodes: string[];
+    shouldStopPropagation: boolean;
 };
 
 // Handlers for the various keyboard listeners we set up
@@ -135,6 +136,7 @@ function subscribe(
     priority = 0,
     shouldPreventDefault = true,
     excludedNodes = [],
+    shouldStopPropagation = false,
 ) {
     const platformAdjustedModifiers = getPlatformEquivalentForKeys(modifiers);
     const displayName = getDisplayName(key, platformAdjustedModifiers);
@@ -150,6 +152,7 @@ function subscribe(
         shouldPreventDefault,
         shouldBubble,
         excludedNodes,
+        shouldStopPropagation,
     });
 
     if (descriptionKey) {
