Merge pull request #30300 from devrari/fix-24198-dob-error

fixed auto submit form when enter key pressed in selection modals
Expensify · Oct 30, 2023 · fa63485 · fa63485
2 parents 443bb82 + bf0a912
commit fa63485
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 2 deletions.
diff --git 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
@@ -58,6 +58,7 @@ function BaseSelectionList({
     inputRef = null,
     disableKeyboardShortcuts = false,
     children,
+    shouldStopPropagation = false,
 }) {
     const {translate} = useLocalize();
     const firstLayoutRef = useRef(true);
@@ -342,6 +343,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
@@ -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
@@ -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
@@ -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
@@ -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,21 @@ 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.ts b/src/libs/KeyboardShortcut/bindHandlerToKeydownEvent/index.ts
@@ -42,7 +42,9 @@ const bindHandlerToKeydownEvent: BindHandlerToKeydownEvent = (getDisplayName, ev
         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.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) {