Material-ui: [Autocomplete] Limit the amount of options

[govizlora]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Autocomplete is great but it is slow when the size of options is large. The solution using Virtualization works, but it requires more code + dependencies.

I think it would be easier to just provide way to limit the amount of the options that are being rendered (for example, 100). Since in real use cases, the user usually only picks from the visible part of the list. For example, Google search only shows the top ten options in its autocomplete.

I've seen similar discussions but it is for the legacy MUI. https://github.com/mui-org/material-ui/issues/3194 and the solution: https://github.com/mui-org/material-ui/pull/3262/files

If it makes sense, I'm willing to create a PR.

Examples 🌈

https://material-ui.com/components/autocomplete/#virtualization

Motivation 🔦

I have a long options to render, and I don't want to use virtualization since it complicates the component. Limiting the amount of options just works for me.

[oliviertassinari]

@govizlora The limit behavior can be implemented with the filterOptions option since the initial release of the component.

However, it could make sense (simpler) to have a limit option in the createFilterOptions() method. Should the default be null to have no limit? What do you think?

[govizlora]

@oliviertassinari Thank you, filterOptions did the work! Sorry I didn't find it before!

I like the idea to have a limit option in the createFilterOptions(), it would make it much simpler. Otherwise, I have to write:

import { Autocomplete, createFilterOptions, FilterOptionsState } from '@material-ui/lab';

const defaultFilterOptions = createFilterOptions<string>();
const filterOptions = (options: string[], state: FilterOptionsState) => 
  defaultFilterOptions(options, state).slice(0, 100);

The limit option can be optional so by default there is no limit.

If people agree on that, I can make a PR. What do you think?