Fix - Web - Blue selection border on plan option after a refresh

src/components/SelectionList/BaseSelectionList.tsx

@@ -24,6 +24,7 @@ import useSingleExecution from '@hooks/useSingleExecution';
 import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets';
 import useThemeStyles from '@hooks/useThemeStyles';
 import getSectionsWithIndexOffset from '@libs/getSectionsWithIndexOffset';
+import {addKeyDownPressListener, removeKeyDownPressListener} from '@libs/KeyboardShortcut/KeyDownPressListener';
 import Log from '@libs/Log';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
@@ -129,6 +130,7 @@ function BaseSelectionList<TItem extends ListItem>(
     const {translate} = useLocalize();
     const listRef = useRef<RNSectionList<TItem, SectionWithIndexOffset<TItem>>>(null);
     const innerTextInputRef = useRef<RNTextInput | null>(null);
+    const shouldSyncFocusRef = useRef(false);
     const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
     const shouldShowSelectAll = !!onSelectAll;
     const activeElementRole = useActiveElementRole();
@@ -318,6 +320,13 @@ function BaseSelectionList<TItem extends ListItem>(
 
     const debouncedScrollToIndex = useMemo(() => lodashDebounce(scrollToIndex, CONST.TIMING.LIST_SCROLLING_DEBOUNCE_TIME, {leading: true, trailing: true}), [scrollToIndex]);
 
+    const setShouldSyncFocus = useCallback(() => {
+        if (shouldSyncFocusRef.current) {
+            return;
+        }
+        shouldSyncFocusRef.current = true;
+    }, []);
+
     // If `initiallyFocusedOptionKey` is not passed, we fall back to `-1`, to avoid showing the highlight on the first member
     const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({
         initialFocusedIndex: flattenedSections.allOptions.findIndex((option) => option.keyForList === initiallyFocusedOptionKey),
@@ -333,9 +342,16 @@ function BaseSelectionList<TItem extends ListItem>(
                 (shouldDebounceScrolling ? debouncedScrollToIndex : scrollToIndex)(index, true);
             }
         },
+        ...(!shouldSyncFocusRef.current && {setShouldSyncFocus}),
         isFocused,
     });
 
+    useEffect(() => {
+        addKeyDownPressListener(setShouldSyncFocus);
+
+        return () => removeKeyDownPressListener(setShouldSyncFocus);
+    }, [setShouldSyncFocus]);
+
     const selectedItemIndex = useMemo(
         () => (initiallyFocusedOptionKey ? flattenedSections.allOptions.findIndex((option) => option.isSelected) : -1),
         [flattenedSections.allOptions, initiallyFocusedOptionKey],
@@ -549,7 +565,7 @@ function BaseSelectionList<TItem extends ListItem>(
                     shouldIgnoreFocus={shouldIgnoreFocus}
                     setFocusedIndex={setFocusedIndex}
                     normalizedIndex={normalizedIndex}
-                    shouldSyncFocus={!isTextInputFocusedRef.current}
+                    shouldSyncFocus={!isTextInputFocusedRef.current && shouldSyncFocusRef.current}
                     wrapperStyle={listItemWrapperStyle}
                     titleStyles={listItemTitleStyles}
                     shouldHighlightSelectedItem={shouldHighlightSelectedItem}

src/hooks/useArrowKeyFocusManager.ts

@@ -15,6 +15,7 @@ type Config = {
     allowHorizontalArrowKeys?: boolean;
     allowNegativeIndexes?: boolean;
     isFocused?: boolean;
+    setShouldSyncFocus?: () => void;
 };
 
 type UseArrowKeyFocusManager = [number, (index: number) => void];
@@ -50,6 +51,7 @@ export default function useArrowKeyFocusManager({
     allowHorizontalArrowKeys = false,
     allowNegativeIndexes = false,
     isFocused = true,
+    setShouldSyncFocus,
 }: Config): UseArrowKeyFocusManager {
     const [focusedIndex, setFocusedIndex] = useState(initialFocusedIndex);
     const prevIsFocusedIndex = usePrevious(focusedIndex);
@@ -82,7 +84,7 @@ export default function useArrowKeyFocusManager({
             return;
         }
         const nextIndex = disableCyclicTraversal ? -1 : maxIndex;
-
+        setShouldSyncFocus?.();
         setFocusedIndex((actualIndex) => {
             const currentFocusedIndex = actualIndex > 0 ? actualIndex - (itemsPerRow ?? 1) : nextIndex;
             let newFocusedIndex = currentFocusedIndex;
@@ -105,14 +107,15 @@ export default function useArrowKeyFocusManager({
             }
             return newFocusedIndex;
         });
-    }, [maxIndex, isFocused, disableCyclicTraversal, itemsPerRow, disabledIndexes, allowNegativeIndexes]);
+    }, [maxIndex, isFocused, disableCyclicTraversal, itemsPerRow, disabledIndexes, allowNegativeIndexes, setShouldSyncFocus]);
 
     useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ARROW_UP, arrowUpCallback, arrowConfig);
 
     const arrowDownCallback = useCallback(() => {
         if (maxIndex < 0 || !isFocused) {
             return;
         }
+        setShouldSyncFocus?.();
 
         const nextIndex = disableCyclicTraversal ? maxIndex : 0;
 
@@ -150,7 +153,7 @@ export default function useArrowKeyFocusManager({
             }
             return newFocusedIndex;
         });
-    }, [disableCyclicTraversal, disabledIndexes, isFocused, itemsPerRow, maxIndex]);
+    }, [disableCyclicTraversal, disabledIndexes, isFocused, itemsPerRow, maxIndex, setShouldSyncFocus]);
 
     useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ARROW_DOWN, arrowDownCallback, arrowConfig);
 

src/hooks/useSyncFocus/index.ts

@@ -1,28 +1,3 @@
-import {useContext, useLayoutEffect} from 'react';
-import type {RefObject} from 'react';
-import type {View} from 'react-native';
-import {ScreenWrapperStatusContext} from '@components/ScreenWrapper';
+import useSyncFocusImplementation from './useSyncFocusImplementation';
 
-/**
- * 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<View>, isFocused: boolean, shouldSyncFocus = true) => {
-    // this hook can be used outside ScreenWrapperStatusContext (eg. in Popovers). So we to check if the context is present.
-    // If we are outside context we don't have to look at transition status
-    const contextValue = useContext(ScreenWrapperStatusContext);
-
-    const didScreenTransitionEnd = contextValue ? contextValue.didScreenTransitionEnd : true;
-
-    useLayoutEffect(() => {
-        if (!isFocused || !shouldSyncFocus || !didScreenTransitionEnd) {
-            return;
-        }
-
-        ref.current?.focus();
-        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
-    }, [didScreenTransitionEnd, isFocused, ref]);
-};
-
-export default useSyncFocus;
+export default useSyncFocusImplementation;

src/hooks/useSyncFocus/useSyncFocusImplementation.ts

@@ -0,0 +1,31 @@
+import {useContext, useLayoutEffect} from 'react';
+import type {RefObject} from 'react';
+import type {View} from 'react-native';
+import {ScreenWrapperStatusContext} from '@components/ScreenWrapper';
+import usePrevious from '@hooks/usePrevious';
+
+/**
+ * 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 useSyncFocusImplementation = (ref: RefObject<View>, isFocused: boolean, shouldSyncFocus = true) => {
+    // this hook can be used outside ScreenWrapperStatusContext (eg. in Popovers). So we to check if the context is present.
+    // If we are outside context we don't have to look at transition status
+    const contextValue = useContext(ScreenWrapperStatusContext);
+
+    const didScreenTransitionEnd = contextValue ? contextValue.didScreenTransitionEnd : true;
+
+    const prevIsFocused = usePrevious(isFocused);
+
+    useLayoutEffect(() => {
+        if (!(isFocused && !prevIsFocused) || !shouldSyncFocus || !didScreenTransitionEnd) {
+            return;
+        }
+
+        ref.current?.focus();
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
+    }, [didScreenTransitionEnd, isFocused, ref]);
+};
+
+export default useSyncFocusImplementation;

tests/unit/useSyncFocusTest.ts

@@ -0,0 +1,37 @@
+import {renderHook} from '@testing-library/react-native';
+import type {RefObject} from 'react';
+import type {View} from 'react-native';
+import useSyncFocus from '@hooks/useSyncFocus/useSyncFocusImplementation';
+
+describe('useSyncFocus', () => {
+    it('useSyncFocus should only focus when isFocused changes from false to true', () => {
+        const refMock = {current: {focus: jest.fn()}};
+
+        // When useSyncFocus is rendered initially with isFocused true
+        const {rerender} = renderHook(
+            ({
+                ref = refMock,
+                isFocused = true,
+            }: {
+                isFocused?: boolean;
+                ref?: {
+                    current: {
+                        focus: jest.Mock;
+                    };
+                };
+            }) => useSyncFocus(ref as unknown as RefObject<View>, isFocused),
+            {initialProps: {}},
+        );
+        // Then the ref focus will not be called.
+        expect(refMock.current.focus).not.toHaveBeenCalled();
+
+        const event = new KeyboardEvent('keydown', {key: 'Tab'});
+        document.dispatchEvent(event);
+
+        // When isFocused changes from false to true
+        rerender({isFocused: false});
+        rerender({isFocused: true});
+        // Then the ref focus will be called.
+        expect(refMock.current.focus).toHaveBeenCalled();
+    });
+});