fixed auto submit form when enter key pressed in selection modals

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>

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,
  });
 

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,
 

src/components/StatePicker/StateSelectorModal.js

@@ -99,6 +99,7 @@ function StateSelectorModal({currentState, isVisible, onClose, onStateSelected,
  onSelectRow={onStateSelected}
  onChangeText={setSearchValue}
  initiallyFocusedOptionKey={currentState}
+ shouldStopPropagation
  />
  </ScreenWrapper>
  </Modal>

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>

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,
+ ]);
 }

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;
  });

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) {