Infinite Scroll

[dbehmoaras]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

The Autocomplete component should support infinite scroll where data can be lazily loaded by triggering an API call to fetch more results and concatenate them to the list of results already rendered.

The current implementation causes the scrollbar to bounce back to the top which defeats the purpose of infinite scrolling.

The following was suggested https://mui.com/material-ui/react-autocomplete/#virtualization but the thread was locked 19376 before I could provide feedback as to why this is not what we are looking for. This suggestion requires pre-loading all of the results in the client before scrolling or preventing the default behavior of the browser which can introduce weird bugs that are tricky to debug.

Examples 🌈

This youtube video explains how to approach it best (not my video, just someone in the community gracious enough to share their solution):

https://www.youtube.com/watch?v=NZKUirTtxcg

Motivation 🔦

Not having this feature has forced us to remove Autocomplete from our codebase and implement the feature ourselves (which works rather elegantly), but it is puzzling that this was omitted from AutoComplete.

[siriwatknp]

Duplicate of #30249

[dbehmoaras]

@siriwatknp this was incorrectly marked as a duplicate but ok

[mgm793]

It's not duplicated, actually I have the same problem

[fmPeretti]

Same problem here, this is not a dup

[expiohm]

same problem , not duplicate

[gbsojo]

Same here. Definitely not a duplicate. Component is lacking this feature and it would really add much value.

[dbehmoaras]

@gbsojo @expiohm @fmPeretti @mgm793 I hate to say it but don't expect anything from the MUI devs on this. I've had multiple interactions with them on this issue, none of which have been helpful (one suggestion was to use virtualization but that's not viable when your list can be 1000s of entries long). The MUI Autocomplete is NOT compatible with infinite scroll. It does not work as expected for this use case, regardless of what the maintainers say - I wish they would listen instead of dismiss us.

To solve this in our codebase, I followed the approach in the youtube link below instead, using the MUI text field for the input and the MUI popper for the dropdown feature, effectively rebuilding the Autocomplete using two separate components. In our case, I used the IntersectionObserver to fire fetchMore query when reaching the bottom element (customizable to your desire of course) and used the ResizeObserver to make it responsive to viewport size. With this approach, it helps to think of infinite scroll as a paginated query, increasing the offset every time you reach the bottom of the list. You could get fancy as well by adding a loader each time the fetchMore query fires.
https://www.youtube.com/watch?v=NZKUirTtxcg

Full credit goes to Web Dev Simplified for sharing this approach. (Before anyone asks, no I am not Web Dev Simplified nor am I involved with the channel or its members in anyway. I am merely citing my source and providing credit where it's due).

[nico-martinucci]

@siriwatknp any chance of reopening this since it was incorrectly marked as duplicate? This change could be as simple as allowing the Autocomplete component to render children, in which case @dbehmoaras 's approach could more easily be accomplished.