[Select] Add virtualization support
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Material UI Select component is lagging when having more than 200 options. I try to work around it using react-virtual npm. this should solve the issue because it follows the Select rule of children can be MenuItem Only, since it provides a hook and not a wrapping component, like in react-window.
Current Behavior 😯
The overflowen options are not rendered when scrolled to them.
Expected Behavior 🤔
It should render the other options, based on the view location.
Steps to Reproduce 🕹
https://codesandbox.io/s/lucid-ritchie-j2c13?file=/src/Demo.tsx
Steps:
- Open the select by clicking it.
- scroll to the bottom.
Context 🔦
My app has dropdowns with over 2000 options in it. If the select is lagging, I can't use it.
https://github.com/mui/material-ui/issues/17001
Your Environment 🌎
`npx @mui/envinfo`
System: OS: macOS 11.6 Binaries: Node: 14.17.0 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 6.14.13 - /usr/local/bin/npm Browsers: Chrome: 94.0.4606.81 Edge: Not Found Firefox: Not Found Safari: 15.0 npmPackages: @emotion/styled: 10.0.27 @types/react: ^17.0.0 => 17.0.1 react: ^17.0.1 => 17.0.1 react-dom: ^17.0.1 => 17.0.1 styled-components: ^5.2.1 => 5.2.1 typescript: ^4.1.3 => 4.1.3 ``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox and reproduce the lag and missing options by opening the Select and scrolling to the bottom. Trace the Select component behavior and determine how virtualization should preserve its MenuItem-only child rule; done means all options render correctly as the list is scrolled.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100