Merge pull request #54682 from FitseTLT/fix-blue-selection-on-page-refresh

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

Author: cristipaval

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 hasKeyBeenPressed = useRef(false);
     const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
     const shouldShowSelectAll = !!onSelectAll;
     const activeElementRole = useActiveElementRole();
@@ -318,6 +320,16 @@ function BaseSelectionList<TItem extends ListItem>(
 
     const debouncedScrollToIndex = useMemo(() => lodashDebounce(scrollToIndex, CONST.TIMING.LIST_SCROLLING_DEBOUNCE_TIME, {leading: true, trailing: true}), [scrollToIndex]);
 
+    const setHasKeyBeenPressed = useCallback(() => {
+        if (hasKeyBeenPressed.current) {
+            return;
+        }
+
+        // We need to track whether a key has been pressed to enable focus syncing only if a key has been pressed.
+        // This is to avoid the default behavior of web showing blue border on click of items after a page refresh.
+        hasKeyBeenPressed.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 +345,16 @@ function BaseSelectionList<TItem extends ListItem>(
                 (shouldDebounceScrolling ? debouncedScrollToIndex : scrollToIndex)(index, true);
             }
         },
+        ...(!hasKeyBeenPressed.current && {setHasKeyBeenPressed}),
         isFocused,
     });
 
+    useEffect(() => {
+        addKeyDownPressListener(setHasKeyBeenPressed);
+
+        return () => removeKeyDownPressListener(setHasKeyBeenPressed);
+    }, [setHasKeyBeenPressed]);
+
     const selectedItemIndex = useMemo(
         () => (initiallyFocusedOptionKey ? flattenedSections.allOptions.findIndex((option) => option.isSelected) : -1),
         [flattenedSections.allOptions, initiallyFocusedOptionKey],
@@ -549,7 +568,7 @@ function BaseSelectionList<TItem extends ListItem>(
                     shouldIgnoreFocus={shouldIgnoreFocus}
                     setFocusedIndex={setFocusedIndex}
                     normalizedIndex={normalizedIndex}
-                    shouldSyncFocus={!isTextInputFocusedRef.current}
+                    shouldSyncFocus={!isTextInputFocusedRef.current && hasKeyBeenPressed.current}
                     wrapperStyle={listItemWrapperStyle}
                     titleStyles={listItemTitleStyles}
                     shouldHighlightSelectedItem={shouldHighlightSelectedItem}

src/hooks/useArrowKeyFocusManager.ts

@@ -15,6 +15,7 @@ type Config = {
     allowHorizontalArrowKeys?: boolean;
     allowNegativeIndexes?: boolean;
     isFocused?: boolean;
+    setHasKeyBeenPressed?: () => void;
 };
 
 type UseArrowKeyFocusManager = [number, (index: number) => void];
@@ -50,6 +51,7 @@ export default function useArrowKeyFocusManager({
     allowHorizontalArrowKeys = false,
     allowNegativeIndexes = false,
     isFocused = true,
+    setHasKeyBeenPressed,
 }: 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;
-
+        setHasKeyBeenPressed?.();
         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, setHasKeyBeenPressed]);
 
     useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ARROW_UP, arrowUpCallback, arrowConfig);
 
     const arrowDownCallback = useCallback(() => {
         if (maxIndex < 0 || !isFocused) {
             return;
         }
+        setHasKeyBeenPressed?.();
 
         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, setHasKeyBeenPressed]);
 
     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 | HTMLElement>, 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({preventScroll: true});
-        // 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,28 @@
+import {useContext, useLayoutEffect} from 'react';
+import type {RefObject} from 'react';
+import type {View} from 'react-native';
+import {ScreenWrapperStatusContext} from '@components/ScreenWrapper';
+
+/**
+ * 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 | HTMLElement>, 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({preventScroll: true});
+        // 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,39 @@
+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 if shouldSyncFocus is true', () => {
+        const refMock = {current: {focus: jest.fn()}};
+
+        // When useSyncFocus is rendered initially while shouldSyncFocus is false.
+        const {rerender} = renderHook(
+            ({
+                ref = refMock,
+                isFocused = true,
+                shouldSyncFocus = false,
+            }: {
+                isFocused?: boolean;
+                shouldSyncFocus?: boolean;
+                ref?: {
+                    current: {
+                        focus: jest.Mock;
+                    };
+                };
+            }) => useSyncFocus(ref as unknown as RefObject<View>, isFocused, shouldSyncFocus),
+            {initialProps: {}},
+        );
+        // Then the ref focus will not be called.
+        expect(refMock.current.focus).not.toHaveBeenCalled();
+
+        rerender({isFocused: false});
+        expect(refMock.current.focus).not.toHaveBeenCalled();
+
+        // When shouldSyncFocus and isFocused are true
+        rerender({isFocused: true, shouldSyncFocus: true});
+
+        // Then the ref focus will be called.
+        expect(refMock.current.focus).toHaveBeenCalled();
+    });
+});