diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 92f3f9b2a9ef..c79418d3cfb5 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -809,6 +809,14 @@ function BaseSelectionList( 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( } } - // 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 = diff --git a/tests/unit/BaseSelectionListTest.tsx b/tests/unit/BaseSelectionListTest.tsx index 3a0706016a22..42b7becd0133 100644 --- a/tests/unit/BaseSelectionListTest.tsx +++ b/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( + , + ); + + // Click Show More button + fireEvent.press(screen.getByText('common.showMore')); + + rerender( + ({...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( + , + ); + + // 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( + ({...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(); + }); });