From b41c35a2c1c9956ae4e302fc0348a07b6edcd301 Mon Sep 17 00:00:00 2001 From: Kailash Devrari 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 /> 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 /> 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 /> 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} [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 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 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) {