Merge pull request #30972 from barttom/fix/29780/change-implementatio…

…n-of-initial-focused-item fix: used initialScrollIndex instead of implementing initial focus ma…
Expensify · Nov 8, 2023 · 01759d1 · 01759d1
2 parents dfd13fc + 6679b76
commit 01759d1
Showing 1 changed file with 7 additions and 8 deletions.
diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js
@@ -144,6 +144,9 @@ function BaseSelectionList({
 
     // If `initiallyFocusedOptionKey` is not passed, we fall back to `-1`, to avoid showing the highlight on the first member
     const [focusedIndex, setFocusedIndex] = useState(() => _.findIndex(flattenedSections.allOptions, (option) => option.keyForList === initiallyFocusedOptionKey));
+    // initialFocusedIndex is needed only on component did mount event, don't need to update value
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const initialFocusedIndex = useMemo(() => (focusedIndex > -1 ? focusedIndex : undefined), []);
 
     // Disable `Enter` shortcut if the active element is a button or checkbox
     const disableEnterShortcut = activeElement && [CONST.ACCESSIBILITY_ROLE.BUTTON, CONST.ACCESSIBILITY_ROLE.CHECKBOX].includes(activeElement.role);
@@ -307,14 +310,9 @@ function BaseSelectionList({
             />
         );
     };
-
-    const scrollToFocusedIndexOnFirstRender = useCallback(() => {
-        if (!firstLayoutRef.current) {
-            return;
-        }
-        scrollToIndex(focusedIndex, false);
+    const handleFirstLayout = useCallback(() => {
         firstLayoutRef.current = false;
-    }, [focusedIndex, scrollToIndex]);
+    }, []);
 
     const updateAndScrollToFocusedIndex = useCallback(
         (newFocusedIndex) => {
@@ -454,7 +452,8 @@ function BaseSelectionList({
                                     viewabilityConfig={{viewAreaCoveragePercentThreshold: 95}}
                                     testID="selection-list"
                                     style={[styles.flexGrow0]}
-                                    onLayout={scrollToFocusedIndexOnFirstRender}
+                                    onLayout={handleFirstLayout}
+                                    initialScrollIndex={initialFocusedIndex}
                                 />
                                 {children}
                             </>