Merge pull request #40642 from allroundexperts/EMBUS-40551

[CP Staging] fix: disable double press event handler
Expensify · Apr 20, 2024 · 8616678 · 8616678
2 parents c249ad4 + 77d5f82
commit 8616678
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 1 deletion.
diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx
@@ -18,6 +18,7 @@ function BaseListItem<TItem extends ListItem>({
     containerStyle,
     isDisabled = false,
     shouldPreventDefaultFocusOnSelectRow = false,
+    shouldPreventEnterKeySubmit = false,
     canSelectMultiple = false,
     onSelectRow,
     onDismissError = () => {},
@@ -65,7 +66,12 @@ function BaseListItem<TItem extends ListItem>({
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...bind}
                 ref={pressableRef}
-                onPress={() => onSelectRow(item)}
+                onPress={(e) => {
+                    if (shouldPreventEnterKeySubmit && e && 'key' in e && 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
@@ -352,6 +352,8 @@ function BaseSelectionList<TItem extends ListItem>(
                 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 ?? ''}
                 isMultilineSupported={isRowMultilineSupported}

diff --git a/src/components/SelectionList/RadioListItem.tsx b/src/components/SelectionList/RadioListItem.tsx
@@ -14,6 +14,7 @@ function RadioListItem<TItem extends ListItem>({
     onSelectRow,
     onDismissError,
     shouldPreventDefaultFocusOnSelectRow,
+    shouldPreventEnterKeySubmit,
     rightHandSideComponent,
     isMultilineSupported = false,
     onFocus,
@@ -34,6 +35,7 @@ function RadioListItem<TItem extends ListItem>({
             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
@@ -137,6 +137,9 @@ type ListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
     /** 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 */
     keyForList?: string;
 
@@ -150,6 +153,7 @@ type ListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
 type BaseListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
     item: TItem;
     shouldPreventDefaultFocusOnSelectRow?: boolean;
+    shouldPreventEnterKeySubmit?: boolean;
     keyForList?: string | null;
     errors?: Errors | ReceiptErrors | null;
     pendingAction?: PendingAction | null;