diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx index 9e6fb31d0316..671823eb255b 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 && '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 index 9ab89aa73f86..f0d22251bc74 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -352,6 +352,8 @@ 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 ?? ''} 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..50929095dc91 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -137,6 +137,9 @@ 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 */ keyForList?: string; @@ -150,6 +153,7 @@ type ListItemProps = CommonListItemProps & { type BaseListItemProps = CommonListItemProps & { item: TItem; shouldPreventDefaultFocusOnSelectRow?: boolean; + shouldPreventEnterKeySubmit?: boolean; keyForList?: string | null; errors?: Errors | ReceiptErrors | null; pendingAction?: PendingAction | null;