From 88cdb51103d4f6702e493aaaf54e18c7cba25407 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Tue, 31 Mar 2026 21:26:28 +0530 Subject: [PATCH 1/9] =?UTF-8?q?Keyboard=20Accessibility=20Issue:=20?= =?UTF-8?q?=E2=80=9CTo:=E2=80=9D=20Field=20Not=20Activatable=20via=20Keybo?= =?UTF-8?q?ard=20on=20Confirm=20Details=20Screen.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: krishna2323 --- .../SelectionList/BaseSelectionList.tsx | 1 + .../SelectionList/ListItem/BaseListItem.tsx | 17 ++++++++++++++++- .../SelectionList/ListItem/ListItemRenderer.tsx | 4 ++-- .../BaseSelectionListWithSections.tsx | 1 + 4 files changed, 20 insertions(+), 3 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 2280563fa322..0bf661811144 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -349,6 +349,7 @@ function BaseSelectionList({ shouldSingleExecuteRowSelect={shouldSingleExecuteRowSelect} shouldUseDefaultRightHandSideCheckmark={shouldUseDefaultRightHandSideCheckmark} shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} + shouldPreventEnterKeySubmit={!disableKeyboardShortcuts} rightHandSideComponent={rightHandSideComponent} isMultilineSupported={isRowMultilineSupported} isAlternateTextMultilineSupported={(alternateNumberOfSupportedLines ?? 0) > 1} diff --git a/src/components/SelectionList/ListItem/BaseListItem.tsx b/src/components/SelectionList/ListItem/BaseListItem.tsx index a52a268a7844..9ed3ed1be3e5 100644 --- a/src/components/SelectionList/ListItem/BaseListItem.tsx +++ b/src/components/SelectionList/ListItem/BaseListItem.tsx @@ -1,4 +1,4 @@ -import React, {useRef} from 'react'; +import React, {useCallback, useRef} from 'react'; import {View} from 'react-native'; import {getButtonRole} from '@components/Button/utils'; import Icon from '@components/Icon'; @@ -136,6 +136,20 @@ function BaseListItem({ canSelectMultiple, }); + // When the list-level Enter shortcut is disabled (shouldPreventEnterKeySubmit=false), + // handle Enter directly on the item since role="option" elements don't get + // automatic Enter→click synthesis from the browser or BaseGenericPressable. + const handleKeyDown = useCallback( + (event: React.KeyboardEvent) => { + if (shouldPreventEnterKeySubmit || event.key !== CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey) { + return; + } + event.preventDefault(); + onSelectRow(item); + }, + [shouldPreventEnterKeySubmit, onSelectRow, item], + ); + return ( onDismissError(item)} @@ -154,6 +168,7 @@ function BaseListItem({ onLongPress={() => { onLongPressRow?.(item); }} + onKeyDown={!shouldPreventEnterKeySubmit ? handleKeyDown : undefined} onPress={(e) => { if (isMouseDownOnInput) { e?.stopPropagation(); // Preventing the click action diff --git a/src/components/SelectionList/ListItem/ListItemRenderer.tsx b/src/components/SelectionList/ListItem/ListItemRenderer.tsx index 1d7b34385a9a..9fc48015235d 100644 --- a/src/components/SelectionList/ListItem/ListItemRenderer.tsx +++ b/src/components/SelectionList/ListItem/ListItemRenderer.tsx @@ -51,6 +51,7 @@ function ListItemRenderer({ shouldUseDefaultRightHandSideCheckmark, shouldHighlightSelectedItem, shouldDisableHoverStyle, + shouldPreventEnterKeySubmit, shouldShowRightCaret, errorRowStyles, }: ListItemRendererProps) { @@ -81,8 +82,7 @@ function ListItemRenderer({ onCheckboxPress={handleOnCheckboxPress()} 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 + shouldPreventEnterKeySubmit={shouldPreventEnterKeySubmit} rightHandSideComponent={rightHandSideComponent} keyForList={item.keyForList} shouldUseDefaultRightHandSideComponent={shouldUseDefaultRightHandSideComponent} diff --git a/src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx b/src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx index 29dc9f607c47..2be4eb18d26c 100644 --- a/src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx +++ b/src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx @@ -350,6 +350,7 @@ function BaseSelectionListWithSections({ shouldSingleExecuteRowSelect={shouldSingleExecuteRowSelect} onDismissError={onDismissError} shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} + shouldPreventEnterKeySubmit={!disableKeyboardShortcuts} rightHandSideComponent={rightHandSideComponent} setFocusedIndex={setFocusedIndex} singleExecution={singleExecution} From 4875c8f9c02b0e5d98654c7cd4a784990ec35218 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Tue, 31 Mar 2026 21:40:24 +0530 Subject: [PATCH 2/9] Re-enable keyboard activation for To: field on Confirm Details screen Signed-off-by: krishna2323 --- src/components/MoneyRequestConfirmationList.tsx | 1 - .../SelectionList/BaseSelectionList.tsx | 1 - .../SelectionList/ListItem/BaseListItem.tsx | 17 +---------------- .../SelectionList/ListItem/ListItemRenderer.tsx | 4 ++-- .../BaseSelectionListWithSections.tsx | 1 - 5 files changed, 3 insertions(+), 21 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index 6edffb9e7467..629e47f00c73 100644 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -1406,7 +1406,6 @@ function MoneyRequestConfirmationList({ footerContent={footerContent} listFooterContent={listFooterContent} style={selectionListStyle} - disableKeyboardShortcuts /> ); diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 0bf661811144..2280563fa322 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -349,7 +349,6 @@ function BaseSelectionList({ shouldSingleExecuteRowSelect={shouldSingleExecuteRowSelect} shouldUseDefaultRightHandSideCheckmark={shouldUseDefaultRightHandSideCheckmark} shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} - shouldPreventEnterKeySubmit={!disableKeyboardShortcuts} rightHandSideComponent={rightHandSideComponent} isMultilineSupported={isRowMultilineSupported} isAlternateTextMultilineSupported={(alternateNumberOfSupportedLines ?? 0) > 1} diff --git a/src/components/SelectionList/ListItem/BaseListItem.tsx b/src/components/SelectionList/ListItem/BaseListItem.tsx index 9ed3ed1be3e5..a52a268a7844 100644 --- a/src/components/SelectionList/ListItem/BaseListItem.tsx +++ b/src/components/SelectionList/ListItem/BaseListItem.tsx @@ -1,4 +1,4 @@ -import React, {useCallback, useRef} from 'react'; +import React, {useRef} from 'react'; import {View} from 'react-native'; import {getButtonRole} from '@components/Button/utils'; import Icon from '@components/Icon'; @@ -136,20 +136,6 @@ function BaseListItem({ canSelectMultiple, }); - // When the list-level Enter shortcut is disabled (shouldPreventEnterKeySubmit=false), - // handle Enter directly on the item since role="option" elements don't get - // automatic Enter→click synthesis from the browser or BaseGenericPressable. - const handleKeyDown = useCallback( - (event: React.KeyboardEvent) => { - if (shouldPreventEnterKeySubmit || event.key !== CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey) { - return; - } - event.preventDefault(); - onSelectRow(item); - }, - [shouldPreventEnterKeySubmit, onSelectRow, item], - ); - return ( onDismissError(item)} @@ -168,7 +154,6 @@ function BaseListItem({ onLongPress={() => { onLongPressRow?.(item); }} - onKeyDown={!shouldPreventEnterKeySubmit ? handleKeyDown : undefined} onPress={(e) => { if (isMouseDownOnInput) { e?.stopPropagation(); // Preventing the click action diff --git a/src/components/SelectionList/ListItem/ListItemRenderer.tsx b/src/components/SelectionList/ListItem/ListItemRenderer.tsx index 9fc48015235d..1d7b34385a9a 100644 --- a/src/components/SelectionList/ListItem/ListItemRenderer.tsx +++ b/src/components/SelectionList/ListItem/ListItemRenderer.tsx @@ -51,7 +51,6 @@ function ListItemRenderer({ shouldUseDefaultRightHandSideCheckmark, shouldHighlightSelectedItem, shouldDisableHoverStyle, - shouldPreventEnterKeySubmit, shouldShowRightCaret, errorRowStyles, }: ListItemRendererProps) { @@ -82,7 +81,8 @@ function ListItemRenderer({ onCheckboxPress={handleOnCheckboxPress()} onDismissError={() => onDismissError?.(item)} shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} - shouldPreventEnterKeySubmit={shouldPreventEnterKeySubmit} + // 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} shouldUseDefaultRightHandSideComponent={shouldUseDefaultRightHandSideComponent} diff --git a/src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx b/src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx index 2be4eb18d26c..29dc9f607c47 100644 --- a/src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx +++ b/src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx @@ -350,7 +350,6 @@ function BaseSelectionListWithSections({ shouldSingleExecuteRowSelect={shouldSingleExecuteRowSelect} onDismissError={onDismissError} shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow} - shouldPreventEnterKeySubmit={!disableKeyboardShortcuts} rightHandSideComponent={rightHandSideComponent} setFocusedIndex={setFocusedIndex} singleExecution={singleExecution} From 0f8f20337118164e7cf57f219a1715650d138727 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Wed, 1 Apr 2026 00:57:42 +0530 Subject: [PATCH 3/9] fix: Enable keyboard activation for To: field on Confirm Details screen Signed-off-by: krishna2323 --- .../MoneyRequestConfirmationList.tsx | 22 +++++-------------- 1 file changed, 6 insertions(+), 16 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index 629e47f00c73..d4901c73751a 100644 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -874,6 +874,8 @@ function MoneyRequestConfirmationList({ ], ); + const canEditParticipant = isFromGlobalCreateAndCanEditParticipant && !isTestReceipt && (!isRestrictedToPreferredPolicy || isTypeInvoice); + const sections = useMemo(() => { const options: Array> = []; if (isTypeSplit) { @@ -895,8 +897,8 @@ function MoneyRequestConfirmationList({ ...participant, isSelected: false, keyForList: `${participant.keyForList ?? participant.accountID ?? participant.reportID}`, - isInteractive: isFromGlobalCreateAndCanEditParticipant && !isTestReceipt && (!isRestrictedToPreferredPolicy || isTypeInvoice), - shouldShowRightCaret: isFromGlobalCreateAndCanEditParticipant && !isTestReceipt && (!isRestrictedToPreferredPolicy || isTypeInvoice), + isInteractive: canEditParticipant, + shouldShowRightCaret: canEditParticipant, })); options.push({ @@ -907,19 +909,7 @@ function MoneyRequestConfirmationList({ } return options; - }, [ - isTypeSplit, - translate, - payeePersonalDetails, - getSplitSectionHeader, - splitParticipants, - selectedParticipants, - isFromGlobalCreateAndCanEditParticipant, - isTestReceipt, - isRestrictedToPreferredPolicy, - isTypeInvoice, - shouldHideToSection, - ]); + }, [isTypeSplit, translate, payeePersonalDetails, getSplitSectionHeader, splitParticipants, selectedParticipants, canEditParticipant, shouldHideToSection]); useEffect(() => { if (!isDistanceRequest || (isMovingTransactionFromTrackExpense && !isPolicyExpenseChat) || !transactionID || isReadOnly) { @@ -1007,7 +997,7 @@ function MoneyRequestConfirmationList({ * Navigate to the participant step */ const navigateToParticipantPage = () => { - if (!isFromGlobalCreateAndCanEditParticipant) { + if (!canEditParticipant) { return; } From e3faeeffe261b953c7bc30775563c411102cbbbf Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Wed, 1 Apr 2026 02:21:01 +0530 Subject: [PATCH 4/9] fix: Prevent keyboard Enter from activating non-interactive list items Signed-off-by: krishna2323 --- src/components/SelectionList/BaseSelectionList.tsx | 2 +- .../SelectionListWithSections/BaseSelectionListWithSections.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 2280563fa322..24a2da19eb76 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -257,7 +257,7 @@ function BaseSelectionList({ }, [data, focusedIndex, isItemSelected]); const selectFocusedOption = () => { - if (!focusedOption) { + if (!focusedOption || focusedOption.isInteractive === false) { return; } selectRow(focusedOption); diff --git a/src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx b/src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx index 29dc9f607c47..5c8a392ae4e7 100644 --- a/src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx +++ b/src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx @@ -181,7 +181,7 @@ function BaseSelectionListWithSections({ const selectFocusedItem = () => { const focusedItem = getFocusedItem(); - if (!focusedItem) { + if (!focusedItem || focusedItem.isInteractive === false) { return; } selectRow(focusedItem); From 16763e314c0184e5aa2a164dda85089a5209e254 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Wed, 1 Apr 2026 03:24:28 +0530 Subject: [PATCH 5/9] fix: Handle Enter key at item level when list keyboard shortcuts are disabled Signed-off-by: krishna2323 --- .../MoneyRequestConfirmationList.tsx | 1 + .../SelectionList/BaseSelectionList.tsx | 1 + .../SelectionList/ListItem/BaseListItem.tsx | 18 +++++++++++++++++- .../ListItem/ListItemRenderer.tsx | 5 +++-- .../BaseSelectionListWithSections.tsx | 1 + 5 files changed, 23 insertions(+), 3 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx index d4901c73751a..3606089024a3 100644 --- a/src/components/MoneyRequestConfirmationList.tsx +++ b/src/components/MoneyRequestConfirmationList.tsx @@ -1396,6 +1396,7 @@ function MoneyRequestConfirmationList({ footerContent={footerContent} listFooterContent={listFooterContent} style={selectionListStyle} + disableKeyboardShortcuts /> ); diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 24a2da19eb76..9a6d769e9bbf 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -363,6 +363,7 @@ function BaseSelectionList({ shouldSyncFocus={!isTextInputFocusedRef.current && hasKeyBeenPressed.current} shouldDisableHoverStyle={shouldDisableHoverStyle} shouldShowRightCaret={shouldShowRightCaret} + shouldPreventEnterKeySubmit={!disableKeyboardShortcuts} /> ); }; diff --git a/src/components/SelectionList/ListItem/BaseListItem.tsx b/src/components/SelectionList/ListItem/BaseListItem.tsx index a52a268a7844..db712d402b15 100644 --- a/src/components/SelectionList/ListItem/BaseListItem.tsx +++ b/src/components/SelectionList/ListItem/BaseListItem.tsx @@ -1,4 +1,4 @@ -import React, {useRef} from 'react'; +import React, {useCallback, useRef} from 'react'; import {View} from 'react-native'; import {getButtonRole} from '@components/Button/utils'; import Icon from '@components/Icon'; @@ -103,6 +103,19 @@ function BaseListItem({ // Sync focus on an item useSyncFocus(pressableRef, !!isFocused, shouldSyncFocus); + + const handleKeyDown = useCallback( + (event: React.KeyboardEvent) => { + if (shouldPreventEnterKeySubmit || event.key !== CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey || event.shiftKey || item.isInteractive === false) { + return; + } + + event.preventDefault(); + onSelectRow(item); + }, + [shouldPreventEnterKeySubmit, onSelectRow, item], + ); + const handleMouseLeave = (e: React.MouseEvent) => { bind.onMouseLeave(); e.stopPropagation(); @@ -191,6 +204,9 @@ function BaseListItem({ {...accessibleAndAccessibilityLabel} accessibilityState={accessibilityState} onMouseLeave={handleMouseLeave} + // When the list-level Enter shortcut is disabled (disableKeyboardShortcuts), items with role="option" + // won't natively fire click on Enter, so we handle it manually via onKeyDown. + onKeyDown={!shouldPreventEnterKeySubmit ? handleKeyDown : undefined} wrapperStyle={pressableWrapperStyle} testID={`${CONST.BASE_LIST_ITEM_TEST_ID}${item.keyForList}`} > diff --git a/src/components/SelectionList/ListItem/ListItemRenderer.tsx b/src/components/SelectionList/ListItem/ListItemRenderer.tsx index 1d7b34385a9a..74273fe69189 100644 --- a/src/components/SelectionList/ListItem/ListItemRenderer.tsx +++ b/src/components/SelectionList/ListItem/ListItemRenderer.tsx @@ -17,6 +17,7 @@ type ListItemRendererProps = Omit; titleContainerStyles?: StyleProp; shouldHighlightSelectedItem: boolean; + shouldPreventEnterKeySubmit?: boolean; }; function ListItemRenderer({ @@ -53,6 +54,7 @@ function ListItemRenderer({ shouldDisableHoverStyle, shouldShowRightCaret, errorRowStyles, + shouldPreventEnterKeySubmit = true, }: ListItemRendererProps) { const handleOnCheckboxPress = () => { if (isTransactionGroupListItemType(item)) { @@ -81,8 +83,7 @@ function ListItemRenderer({ onCheckboxPress={handleOnCheckboxPress()} 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 + shouldPreventEnterKeySubmit={shouldPreventEnterKeySubmit} rightHandSideComponent={rightHandSideComponent} keyForList={item.keyForList} shouldUseDefaultRightHandSideComponent={shouldUseDefaultRightHandSideComponent} diff --git a/src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx b/src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx index 5c8a392ae4e7..edbdbd2ea6e1 100644 --- a/src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx +++ b/src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx @@ -363,6 +363,7 @@ function BaseSelectionListWithSections({ titleNumberOfLines={titleNumberOfLines} shouldUseDefaultRightHandSideComponent={shouldUseDefaultRightHandSideComponent} shouldDisableHoverStyle={shouldDisableHoverStyle} + shouldPreventEnterKeySubmit={!disableKeyboardShortcuts} /> ); } From f61e8d6c0628e15c732b6f159a335c89d74d1218 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Wed, 1 Apr 2026 23:18:04 +0530 Subject: [PATCH 6/9] fix: Ignore bubbled Enter events from nested inputs in list item handler Signed-off-by: krishna2323 --- .../SelectionList/ListItem/BaseListItem.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/components/SelectionList/ListItem/BaseListItem.tsx b/src/components/SelectionList/ListItem/BaseListItem.tsx index db712d402b15..4b31744be430 100644 --- a/src/components/SelectionList/ListItem/BaseListItem.tsx +++ b/src/components/SelectionList/ListItem/BaseListItem.tsx @@ -104,9 +104,22 @@ function BaseListItem({ // Sync focus on an item useSyncFocus(pressableRef, !!isFocused, shouldSyncFocus); + // List items use role="option" which doesn't natively respond to Enter key presses. + // When the list-level keyboard shortcut is disabled (disableKeyboardShortcuts), we handle + // Enter activation here at the item level so each row can still be activated individually + // without interfering with other focusable controls (e.g. footer inputs) on the same screen. const handleKeyDown = useCallback( (event: React.KeyboardEvent) => { - if (shouldPreventEnterKeySubmit || event.key !== CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey || event.shiftKey || item.isInteractive === false) { + const target = event.target as HTMLElement; + if ( + shouldPreventEnterKeySubmit || + event.key !== CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey || + event.shiftKey || + item.isInteractive === false || + target?.tagName === CONST.ELEMENT_NAME.INPUT || + target?.tagName === CONST.ELEMENT_NAME.TEXTAREA || + target?.contentEditable === 'true' + ) { return; } From 9ee327b9cf55fa410600b83fe3fb72a592896a89 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Wed, 1 Apr 2026 23:30:33 +0530 Subject: [PATCH 7/9] fix: Skip Enter activation on list items when modifier keys are held Signed-off-by: krishna2323 --- src/components/SelectionList/ListItem/BaseListItem.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/SelectionList/ListItem/BaseListItem.tsx b/src/components/SelectionList/ListItem/BaseListItem.tsx index 4b31744be430..eec0e3b82bdf 100644 --- a/src/components/SelectionList/ListItem/BaseListItem.tsx +++ b/src/components/SelectionList/ListItem/BaseListItem.tsx @@ -115,6 +115,8 @@ function BaseListItem({ shouldPreventEnterKeySubmit || event.key !== CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey || event.shiftKey || + event.metaKey || + event.ctrlKey || item.isInteractive === false || target?.tagName === CONST.ELEMENT_NAME.INPUT || target?.tagName === CONST.ELEMENT_NAME.TEXTAREA || From 8bd63c6e3a604891ff7c8b67e7963fbe0f738975 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Wed, 1 Apr 2026 23:37:25 +0530 Subject: [PATCH 8/9] remove useCallback. Signed-off-by: krishna2323 --- .../SelectionList/ListItem/BaseListItem.tsx | 41 +++++++++---------- 1 file changed, 19 insertions(+), 22 deletions(-) diff --git a/src/components/SelectionList/ListItem/BaseListItem.tsx b/src/components/SelectionList/ListItem/BaseListItem.tsx index eec0e3b82bdf..03dc6255b101 100644 --- a/src/components/SelectionList/ListItem/BaseListItem.tsx +++ b/src/components/SelectionList/ListItem/BaseListItem.tsx @@ -1,4 +1,4 @@ -import React, {useCallback, useRef} from 'react'; +import React, {useRef} from 'react'; import {View} from 'react-native'; import {getButtonRole} from '@components/Button/utils'; import Icon from '@components/Icon'; @@ -108,28 +108,25 @@ function BaseListItem({ // When the list-level keyboard shortcut is disabled (disableKeyboardShortcuts), we handle // Enter activation here at the item level so each row can still be activated individually // without interfering with other focusable controls (e.g. footer inputs) on the same screen. - const handleKeyDown = useCallback( - (event: React.KeyboardEvent) => { - const target = event.target as HTMLElement; - if ( - shouldPreventEnterKeySubmit || - event.key !== CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey || - event.shiftKey || - event.metaKey || - event.ctrlKey || - item.isInteractive === false || - target?.tagName === CONST.ELEMENT_NAME.INPUT || - target?.tagName === CONST.ELEMENT_NAME.TEXTAREA || - target?.contentEditable === 'true' - ) { - return; - } + const handleKeyDown = (event: React.KeyboardEvent) => { + const target = event.target as HTMLElement; + if ( + shouldPreventEnterKeySubmit || + event.key !== CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey || + event.shiftKey || + event.metaKey || + event.ctrlKey || + item.isInteractive === false || + target?.tagName === CONST.ELEMENT_NAME.INPUT || + target?.tagName === CONST.ELEMENT_NAME.TEXTAREA || + target?.contentEditable === 'true' + ) { + return; + } - event.preventDefault(); - onSelectRow(item); - }, - [shouldPreventEnterKeySubmit, onSelectRow, item], - ); + event.preventDefault(); + onSelectRow(item); + }; const handleMouseLeave = (e: React.MouseEvent) => { bind.onMouseLeave(); From d4d9c1a1bc1718d4c698a47e4a669aca72062353 Mon Sep 17 00:00:00 2001 From: krishna2323 Date: Wed, 1 Apr 2026 23:57:11 +0530 Subject: [PATCH 9/9] fix: Use accessible prop to guard against bubbled Enter events in list items Signed-off-by: krishna2323 --- src/components/SelectionList/ListItem/BaseListItem.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/components/SelectionList/ListItem/BaseListItem.tsx b/src/components/SelectionList/ListItem/BaseListItem.tsx index 03dc6255b101..acec05bc102b 100644 --- a/src/components/SelectionList/ListItem/BaseListItem.tsx +++ b/src/components/SelectionList/ListItem/BaseListItem.tsx @@ -109,17 +109,14 @@ function BaseListItem({ // Enter activation here at the item level so each row can still be activated individually // without interfering with other focusable controls (e.g. footer inputs) on the same screen. const handleKeyDown = (event: React.KeyboardEvent) => { - const target = event.target as HTMLElement; if ( shouldPreventEnterKeySubmit || + accessible === false || event.key !== CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey || event.shiftKey || event.metaKey || event.ctrlKey || - item.isInteractive === false || - target?.tagName === CONST.ELEMENT_NAME.INPUT || - target?.tagName === CONST.ELEMENT_NAME.TEXTAREA || - target?.contentEditable === 'true' + item.isInteractive === false ) { return; }