diff --git a/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js b/src/components/NewDatePicker/CalendarPicker/YearPickerModal.js index 5489a9244f68..d784f439dfee 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 /> diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js index 65f98828dca7..d4fd0bb524d4 100644 --- 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 index 2b53f555134e..c3bae89eaba2 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 8bda9d5303c8..6a753dbc660c 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 /> diff --git a/src/components/ValuePicker/ValueSelectorModal.js b/src/components/ValuePicker/ValueSelectorModal.js index 0a524a324959..cd7923296eed 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 /> diff --git a/src/hooks/useKeyboardShortcut.js b/src/hooks/useKeyboardShortcut.js index 470d29243fe8..5427fc6a654e 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,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 index 8f2eaad25c5b..533fad486a84 100644 --- 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 index 249311f92cd2..cfcf5d5ef535 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) {