Infinite scroll doesn't work when input has a value

[morozovamv]

Case: implement a select that supports infinite scroll and search.

Approach: I used AsyncSelect with a combination of loadOptions and onMenuScrollToBottom. loadOptions - triggers data update on input change, onMenuScrollToBottom - triggers data update when scrolling the menu. Also defaultOptions is the updated data array (from query) because it is only way to make onMenuScrollToBottom work.

Issue: when some value added to the input, after scrolling to the bottom onMenuScrollToBottom triggers data loading, but the menu doesn't render the new data set.

STR:

• focus the select input area
• add some value to search for
• scroll the menu area to the bottom

Result: more items are loaded, but select menu doesn't render them Expected result: should work similar to the case if the input field was empty (new items should appear in the menu)

App: https://stackblitz.com/edit/react-select-infinite-scroll-when-searching-issue?file=src%2FApp.tsx

Another question: it's not clear where to put debounce, if I need to delay data loading while typing. I tried some examples from this repo issues/discussions, none of them worked.

Would be awesome to have this functionality out of the box or explained in the docs.

[RajNandigalla]

@morozovamv have you found any fix for this ?

[morozovamv]

@morozovamv have you found any fix for this ?

Nope, I guess the only way is to look for alternatives, this one seems to be ☠️

[RajNandigalla]

@morozovamv Try this, it works Async Select more of a abstraction on Select, so i used Select directly , have added debouncing as well Can you Let me know if i missed any use case

https://stackblitz.com/edit/react-select-infinite-scroll-when-searching-issue-dqqylu?file=src%2FApp.tsx,src%2Findex.tsx

[morozovamv]

@RajNandigalla if I follow the steps that I shared in the first message, it still doesn't work.

STR:

• focus the select input area
• add some value to search for
• scroll the menu area to the bottom

[morozovamv]

@RajNandigalla I just checked what I've done to make it work, in general: I added a block to the end of the MenuList, when it reaches "view", I trigger fetchMore.

[RajNandigalla]

@RajNandigalla if I follow the steps that I shared in the first message, it still doesn't work.

STR:

• focus the select input area
• add some value to search for
• scroll the menu area to the bottom

https://github.com/JedWatson/react-select/assets/41220974/9b799435-164b-44aa-b080-d2b7dc2b8d28

Hope i followed your steps correctly

[morozovamv]

@RajNandigalla when you focus the select and input "ai" it should show all elements that have "ai" substring from the list of loaded items and it should also request for more items which doesn't happen. If you unfocus and focus the select again, scroll to the end to load more items and input "ai" again, you will see that there are more items which had to be loaded when on the first go. I could miss something, but it was hard to find a combination of select API that would handle all cases:

• fetch more on scroll when select input is empty
• fetch more on scroll when select input is not empty
• refetch on input change

[ObaidAshiq]

Found this library, over react paginate Seems like it dos what you might need to do react-select-async-paginate