From a388a0edfb7e635d00324e49c82791bc894dcbbb Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Sun, 21 Apr 2024 00:23:54 +0500 Subject: [PATCH 1/4] disable double press event handler --- src/components/SelectionList/BaseListItem.tsx | 8 +++++++- src/components/SelectionList/BaseSelectionList.tsx | 1 + src/components/SelectionList/RadioListItem.tsx | 2 ++ src/components/SelectionList/types.ts | 3 +++ 4 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx index 9e6fb31d0316..6e92d09bad4a 100644 --- a/src/components/SelectionList/BaseListItem.tsx +++ b/src/components/SelectionList/BaseListItem.tsx @@ -18,6 +18,7 @@ function BaseListItem({ containerStyle, isDisabled = false, shouldPreventDefaultFocusOnSelectRow = false, + shouldPreventEnterKeySubmit = false, canSelectMultiple = false, onSelectRow, onDismissError = () => {}, @@ -65,7 +66,12 @@ function BaseListItem({ // eslint-disable-next-line react/jsx-props-no-spreading {...bind} ref={pressableRef} - onPress={() => onSelectRow(item)} + onPress={(e) => { + if (shouldPreventEnterKeySubmit && e instanceof KeyboardEvent && e.key === CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey) { + return; + } + onSelectRow(item); + }} disabled={isDisabled} accessibilityLabel={item.text ?? ''} role={CONST.ROLE.BUTTON} diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 9ab89aa73f86..a77d3cd36417 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -352,6 +352,7 @@ function BaseSelectionList( onCheckboxPress={onCheckboxPress ? () => onCheckboxPress?.(item) : undefined} onDismissError={() => onDismissError?.(item)} shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} + shouldPreventEnterKeySubmit rightHandSideComponent={rightHandSideComponent} keyForList={item.keyForList ?? ''} isMultilineSupported={isRowMultilineSupported} diff --git a/src/components/SelectionList/RadioListItem.tsx b/src/components/SelectionList/RadioListItem.tsx index 7ad4819b9690..b595008e4e3b 100644 --- a/src/components/SelectionList/RadioListItem.tsx +++ b/src/components/SelectionList/RadioListItem.tsx @@ -14,6 +14,7 @@ function RadioListItem({ onSelectRow, onDismissError, shouldPreventDefaultFocusOnSelectRow, + shouldPreventEnterKeySubmit, rightHandSideComponent, isMultilineSupported = false, onFocus, @@ -34,6 +35,7 @@ function RadioListItem({ onSelectRow={onSelectRow} onDismissError={onDismissError} shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} + shouldPreventEnterKeySubmit={shouldPreventEnterKeySubmit} rightHandSideComponent={rightHandSideComponent} keyForList={item.keyForList} onFocus={onFocus} diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index a96d6c3abb17..b6995ef85fd0 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -137,6 +137,8 @@ type ListItemProps = CommonListItemProps & { /** Whether the default focus should be prevented on row selection */ shouldPreventDefaultFocusOnSelectRow?: boolean; + shouldPreventEnterKeySubmit?: boolean; + /** Key used internally by React */ keyForList?: string; @@ -150,6 +152,7 @@ type ListItemProps = CommonListItemProps & { type BaseListItemProps = CommonListItemProps & { item: TItem; shouldPreventDefaultFocusOnSelectRow?: boolean; + shouldPreventEnterKeySubmit?: boolean; keyForList?: string | null; errors?: Errors | ReceiptErrors | null; pendingAction?: PendingAction | null; From 8fc1782e19800275dc5a16d868a7981a7da9b45d Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Sun, 21 Apr 2024 00:48:49 +0500 Subject: [PATCH 2/4] fix crash on android --- src/components/SelectionList/BaseListItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx index 6e92d09bad4a..671823eb255b 100644 --- a/src/components/SelectionList/BaseListItem.tsx +++ b/src/components/SelectionList/BaseListItem.tsx @@ -67,7 +67,7 @@ function BaseListItem({ {...bind} ref={pressableRef} onPress={(e) => { - if (shouldPreventEnterKeySubmit && e instanceof KeyboardEvent && e.key === CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey) { + if (shouldPreventEnterKeySubmit && e && 'key' in e && e.key === CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey) { return; } onSelectRow(item); From 3d00d650afb36a5e25af42d41dfc22f7a4212664 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Sun, 21 Apr 2024 01:35:45 +0500 Subject: [PATCH 3/4] add comment on the new prop --- src/components/SelectionList/types.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index b6995ef85fd0..50929095dc91 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -137,6 +137,7 @@ type ListItemProps = CommonListItemProps & { /** Whether the default focus should be prevented on row selection */ shouldPreventDefaultFocusOnSelectRow?: boolean; + /** Prevent the submission of the list item when enter key is pressed */ shouldPreventEnterKeySubmit?: boolean; /** Key used internally by React */ From 77d5f820e8f65ea0720e0b0d0df9d8144862932b Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Sun, 21 Apr 2024 01:45:10 +0500 Subject: [PATCH 4/4] add comment on the new prop --- src/components/SelectionList/BaseSelectionList.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index a77d3cd36417..f0d22251bc74 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -352,6 +352,7 @@ function BaseSelectionList( onCheckboxPress={onCheckboxPress ? () => onCheckboxPress?.(item) : undefined} onDismissError={() => onDismissError?.(item)} shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} + // We're already handling the Enter key press in the useKeyboardShortcut hook, so we don't want the list item to submit the form shouldPreventEnterKeySubmit rightHandSideComponent={rightHandSideComponent} keyForList={item.keyForList ?? ''}