diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx index 671823eb255b7..b1f0141663adf 100644 --- a/src/components/SelectionList/BaseListItem.tsx +++ b/src/components/SelectionList/BaseListItem.tsx @@ -40,7 +40,7 @@ function BaseListItem({ const pressableRef = useRef(null); // Sync focus on an item - useSyncFocus(pressableRef, Boolean(isFocused && shouldSyncFocus)); + useSyncFocus(pressableRef, Boolean(isFocused), shouldSyncFocus); const rightHandSideComponentRender = () => { if (canSelectMultiple || !rightHandSideComponent) { diff --git a/src/hooks/useSyncFocus/index.ts b/src/hooks/useSyncFocus/index.ts index bdc4a6a876dac..2dd0fef70cf7e 100644 --- a/src/hooks/useSyncFocus/index.ts +++ b/src/hooks/useSyncFocus/index.ts @@ -1,20 +1,24 @@ import {useLayoutEffect} from 'react'; import type {RefObject} from 'react'; import type {View} from 'react-native'; +import useScreenWrapperTranstionStatus from '@hooks/useScreenWrapperTransitionStatus'; /** * Custom React hook created to handle sync of focus on an element when the user navigates through the app with keyboard. * When the user navigates through the app using the arrows and then the tab button, the focus on the element and the native focus of the browser differs. * To maintain consistency when an element is focused in the app, the focus() method is additionally called on the focused element to eliminate the difference between native browser focus and application focus. */ -const useSyncFocus = (ref: RefObject, isFocused: boolean) => { +const useSyncFocus = (ref: RefObject, isFocused: boolean, shouldSyncFocus = true) => { + const {didScreenTransitionEnd} = useScreenWrapperTranstionStatus(); + useLayoutEffect(() => { - if (!isFocused) { + if (!isFocused || !shouldSyncFocus || !didScreenTransitionEnd) { return; } ref.current?.focus(); - }, [isFocused, ref]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [didScreenTransitionEnd, isFocused, ref]); }; export default useSyncFocus; diff --git a/tests/perf-test/SelectionList.perf-test.tsx b/tests/perf-test/SelectionList.perf-test.tsx index a29b66d680b07..07a9a4d6ce222 100644 --- a/tests/perf-test/SelectionList.perf-test.tsx +++ b/tests/perf-test/SelectionList.perf-test.tsx @@ -57,6 +57,10 @@ jest.mock('@components/withKeyboardState', () => ({ + useCardAnimation: () => {}, +})); + jest.mock('@react-navigation/native', () => ({ useFocusEffect: () => {}, useIsFocused: () => true,