Merge pull request #38886 from abzokhattab/fix-scroll-to-last-option-…

…by-keybaord Fix/last option is not selected when pressing up arrow key
Expensify · Mar 27, 2024 · 77fe8da · 77fe8da
2 parents d0a78c8 + 3cf22d1
commit 77fe8da
Showing 1 changed file with 23 additions and 23 deletions.
diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
@@ -164,32 +164,32 @@ function BaseSelectionList<TItem extends ListItem>(
     // If `initiallyFocusedOptionKey` is not passed, we fall back to `-1`, to avoid showing the highlight on the first member
     const [focusedIndex, setFocusedIndex] = useState(() => flattenedSections.allOptions.findIndex((option) => option.keyForList === initiallyFocusedOptionKey));
 
-    const [slicedSections, ShowMoreButtonInstance] = useMemo(
-        () => [
-            sections.map((section) => {
-                if (isEmpty(section.data)) {
-                    return section;
-                }
+    const [slicedSections, ShowMoreButtonInstance] = useMemo(() => {
+        let remainingOptionsLimit = CONST.MAX_OPTIONS_SELECTOR_PAGE_LENGTH * currentPage;
+        const processedSections = sections.map((section) => {
+            const data = !isEmpty(section.data) && remainingOptionsLimit > 0 ? section.data.slice(0, remainingOptionsLimit) : [];
+            remainingOptionsLimit -= data.length;
 
-                return {
-                    ...section,
-                    data: section.data.slice(0, CONST.MAX_OPTIONS_SELECTOR_PAGE_LENGTH * currentPage),
-                };
-            }),
-            flattenedSections.allOptions.length > CONST.MAX_OPTIONS_SELECTOR_PAGE_LENGTH * currentPage ? (
-                <ShowMoreButton
-                    containerStyle={[styles.mt2, styles.mb5]}
-                    currentCount={CONST.MAX_OPTIONS_SELECTOR_PAGE_LENGTH * currentPage}
-                    totalCount={flattenedSections.allOptions.length}
-                    onPress={incrementPage}
-                />
-            ) : null,
-        ],
+            return {
+                ...section,
+                data,
+            };
+        });
+
+        const shouldShowMoreButton = flattenedSections.allOptions.length > CONST.MAX_OPTIONS_SELECTOR_PAGE_LENGTH * currentPage;
+        const showMoreButton = shouldShowMoreButton ? (
+            <ShowMoreButton
+                containerStyle={[styles.mt2, styles.mb5]}
+                currentCount={CONST.MAX_OPTIONS_SELECTOR_PAGE_LENGTH * currentPage}
+                totalCount={flattenedSections.allOptions.length}
+                onPress={incrementPage}
+            />
+        ) : null;
+        return [processedSections, showMoreButton];
         // we don't need to add styles here as they change
         // we don't need to add flattendedSections here as they will change along with sections
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        [sections, currentPage],
-    );
+    }, [sections, currentPage]);
 
     // Disable `Enter` shortcut if the active element is a button or checkbox
     const disableEnterShortcut = activeElementRole && [CONST.ROLE.BUTTON, CONST.ROLE.CHECKBOX].includes(activeElementRole as ButtonOrCheckBoxRoles);
@@ -476,7 +476,7 @@ function BaseSelectionList<TItem extends ListItem>(
         <ArrowKeyFocusManager
             disabledIndexes={flattenedSections.disabledOptionsIndexes}
             focusedIndex={focusedIndex}
-            maxIndex={flattenedSections.allOptions.length - 1}
+            maxIndex={slicedSections.flatMap((section) => section.data).length - 1}
             onFocusedIndexChanged={updateAndScrollToFocusedIndex}
         >
             <SafeAreaConsumer>