diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 36b2cf873416..a515474b9d97 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -101,6 +101,7 @@ function BaseSelectionList( onLongPressRow, shouldShowTextInput = !!textInputLabel || !!textInputIconLeft, shouldShowListEmptyContent = true, + shouldIgnoreFocus = false, scrollEventThrottle, contentContainerStyle, }: BaseSelectionListProps, @@ -468,7 +469,7 @@ function BaseSelectionList( isAlternateTextMultilineSupported={isAlternateTextMultilineSupported} alternateTextNumberOfLines={alternateTextNumberOfLines} onFocus={() => { - if (isDisabled) { + if (shouldIgnoreFocus || isDisabled) { return; } setFocusedIndex(normalizedIndex); diff --git a/src/components/SelectionList/index.tsx b/src/components/SelectionList/index.tsx index b719737a963b..fc788a7e2b4b 100644 --- a/src/components/SelectionList/index.tsx +++ b/src/components/SelectionList/index.tsx @@ -1,6 +1,7 @@ import React, {forwardRef, useEffect, useState} from 'react'; import type {ForwardedRef} from 'react'; import {Keyboard} from 'react-native'; +import * as Browser from '@libs/Browser'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import BaseSelectionList from './BaseSelectionList'; import type {BaseSelectionListProps, ListItem, SelectionListHandle} from './types'; @@ -42,6 +43,9 @@ function SelectionList({onScroll, ...props}: BaseSelecti {...props} ref={ref} onScroll={onScroll ?? defaultOnScroll} + // Ignore the focus if it's caused by a touch event on mobile chrome. + // For example, a long press will trigger a focus event on mobile chrome. + shouldIgnoreFocus={Browser.isMobileChrome() && isScreenTouched} /> ); } diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 3ac48519c9c6..54d4108e873a 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -492,6 +492,9 @@ type BaseSelectionListProps = Partial & { /** Styles to apply to SectionList component */ sectionListStyle?: StyleProp; + /** Whether to ignore the focus event */ + shouldIgnoreFocus?: boolean; + /** Whether focus event should be delayed */ shouldDelayFocus?: boolean;