diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 015fd284c0b4..32cd89854cff 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -164,32 +164,32 @@ 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(() => 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 ? ( - - ) : null, - ], + return { + ...section, + data, + }; + }); + + const shouldShowMoreButton = flattenedSections.allOptions.length > CONST.MAX_OPTIONS_SELECTOR_PAGE_LENGTH * currentPage; + const showMoreButton = shouldShowMoreButton ? ( + + ) : 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( section.data).length - 1} onFocusedIndexChanged={updateAndScrollToFocusedIndex} >