Merge pull request Expensify#66780 from Krishna2323/krishna2323/issue/65977

fix: Tags - List jumps to “Show More” when selecting tag after 500.

Author: rafecolton

src/components/SelectionList/BaseSelectionList.tsx

@@ -809,6 +809,14 @@ function BaseSelectionList<TItem extends ListItem>(
     const prevSelectedOptionsLength = usePrevious(flattenedSections.selectedOptions.length);
     const prevAllOptionsLength = usePrevious(flattenedSections.allOptions.length);
 
+    useEffect(() => {
+        if (prevTextInputValue === textInputValue) {
+            return;
+        }
+        // Reset the current page to 1 when the user types something
+        setCurrentPage(1);
+    }, [textInputValue, prevTextInputValue]);
+
     useEffect(() => {
         // Avoid changing focus if the textInputValue remains unchanged.
         if (
@@ -831,11 +839,6 @@ function BaseSelectionList<TItem extends ListItem>(
             }
         }
 
-        // Reset the current page to 1 when the user types something
-        if (prevTextInputValue !== textInputValue) {
-            setCurrentPage(1);
-        }
-
         // Remove the focus if the search input is empty and prev search input not empty or selected options length is changed (and allOptions length remains the same)
         // else focus on the first non disabled item
         const newSelectedIndex =

tests/unit/BaseSelectionListTest.tsx

@@ -211,4 +211,62 @@ describe('BaseSelectionList', () => {
         expect(screen.getByTestId(`${CONST.BASE_LIST_ITEM_TEST_ID}70`)).toBeTruthy();
         expect(screen.getByTestId(`${CONST.BASE_LIST_ITEM_TEST_ID}70`)).toBeSelected();
     });
+
+    it('does not reset page when only selectedOptions changes', () => {
+        const {rerender} = render(
+            <BaseListItemRenderer
+                sections={[{data: largeMockSections}]}
+                canSelectMultiple={false}
+                initialNumToRender={110}
+            />,
+        );
+
+        // Click Show More button
+        fireEvent.press(screen.getByText('common.showMore'));
+
+        rerender(
+            <BaseListItemRenderer
+                sections={[{data: largeMockSections.map((item, index) => ({...item, isSelected: index === 3}))}]}
+                canSelectMultiple={false}
+                initialNumToRender={110}
+            />,
+        );
+
+        // Should now show items from second page
+        expect(screen.getByTestId(`${CONST.BASE_LIST_ITEM_TEST_ID}51`)).toBeTruthy();
+        expect(screen.getByTestId(`${CONST.BASE_LIST_ITEM_TEST_ID}62`)).toBeTruthy();
+
+        // Should not show, "Show more" button as we rendered whole list and search text was not changed
+        expect(screen.queryByText('common.showMore')).toBeFalsy();
+    });
+
+    it('should reset current page when text input changes', () => {
+        const {rerender} = render(
+            <BaseListItemRenderer
+                sections={[{data: largeMockSections}]}
+                canSelectMultiple={false}
+                initialNumToRender={110}
+            />,
+        );
+
+        // Click Show More button
+        fireEvent.press(screen.getByText('common.showMore'));
+        expect(screen.getByTestId(`${CONST.BASE_LIST_ITEM_TEST_ID}99`)).toBeTruthy();
+
+        // Rerender with changed `searchText` to trigger `setCurrentPage(1)`
+        rerender(
+            <BaseListItemRenderer
+                sections={[{data: largeMockSections.map((item, index) => ({...item, isSelected: index === 3}))}]}
+                canSelectMultiple={false}
+                searchText="Item"
+                initialNumToRender={110}
+            />,
+        );
+
+        // Should not show the items from second page
+        expect(screen.queryByText(`${CONST.BASE_LIST_ITEM_TEST_ID}52`)).toBeFalsy();
+
+        // Should show, "Show more" button as current page is reset
+        expect(screen.getByText('common.showMore')).toBeOnTheScreen();
+    });
 });