diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js index e3ba0dbd7c2f..f749807cbe2d 100644 --- 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}