From 62110db8814dfde2251ec1bd253706532caa4927 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 1 Oct 2024 15:55:00 +0800 Subject: [PATCH 1/4] ignore focus event when triggered by a touch input --- src/components/SelectionList/BaseSelectionList.tsx | 3 ++- src/components/SelectionList/index.tsx | 3 +++ src/components/SelectionList/types.ts | 3 +++ 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 02564a69f0f1..a253dc0a5798 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, 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..18f2a2b188e1 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,8 @@ function SelectionList({onScroll, ...props}: BaseSelecti {...props} ref={ref} onScroll={onScroll ?? defaultOnScroll} + // Ignore the focus if it's caused by a touch event on a mobile chrome + shouldIgnoreFocus={Browser.isMobileChrome() && isScreenTouched} /> ); } diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 089a5ac5d99c..e2b8474b2759 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -489,6 +489,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; From 99d0803c042a00af00c7fc2c69be6aa6bd8d346d Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 1 Oct 2024 19:13:04 +0800 Subject: [PATCH 2/4] lint --- src/components/SelectionList/BaseSelectionList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index a253dc0a5798..f9422ac6e303 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -469,7 +469,7 @@ function BaseSelectionList( isAlternateTextMultilineSupported={isAlternateTextMultilineSupported} alternateTextNumberOfLines={alternateTextNumberOfLines} onFocus={() => { - if (shouldIgnoreFocus || isDisabled) { + if (!!shouldIgnoreFocus || isDisabled) { return; } setFocusedIndex(normalizedIndex); From cec62f1b0c31f159423adb8fd25e6a704a41cfd8 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 2 Oct 2024 11:17:59 +0800 Subject: [PATCH 3/4] use default value --- src/components/SelectionList/BaseSelectionList.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index e2d1a5720b4f..a515474b9d97 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -101,7 +101,7 @@ function BaseSelectionList( onLongPressRow, shouldShowTextInput = !!textInputLabel || !!textInputIconLeft, shouldShowListEmptyContent = true, - shouldIgnoreFocus, + shouldIgnoreFocus = false, scrollEventThrottle, contentContainerStyle, }: BaseSelectionListProps, @@ -469,7 +469,7 @@ function BaseSelectionList( isAlternateTextMultilineSupported={isAlternateTextMultilineSupported} alternateTextNumberOfLines={alternateTextNumberOfLines} onFocus={() => { - if (!!shouldIgnoreFocus || isDisabled) { + if (shouldIgnoreFocus || isDisabled) { return; } setFocusedIndex(normalizedIndex); From 28b7891d7f1b6f54dff0bdfc1c8af5f200faa849 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 2 Oct 2024 11:22:15 +0800 Subject: [PATCH 4/4] update comment --- src/components/SelectionList/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/SelectionList/index.tsx b/src/components/SelectionList/index.tsx index 18f2a2b188e1..fc788a7e2b4b 100644 --- a/src/components/SelectionList/index.tsx +++ b/src/components/SelectionList/index.tsx @@ -43,7 +43,8 @@ function SelectionList({onScroll, ...props}: BaseSelecti {...props} ref={ref} onScroll={onScroll ?? defaultOnScroll} - // Ignore the focus if it's caused by a touch event on a mobile chrome + // 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} /> );