New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Select] Add virtualization support #29130
Comments
There are a few problems with your implementation.
|
thx for the response. Your solution is progress, yet with still few issues:
|
I haven't used the library much I must be honest, so I am pretty sure it needs more work. Also, take a look at https://mui.com/components/autocomplete/#virtualization for inspiration too. |
thank you but it got to be the select, i can't use the autocomplete. |
Yeah, it's unfortunate that the select uses the |
Thx again for the quick response... If I find a way to solve this ill post it here |
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 inreact-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:
Context 🔦
My app has dropdowns with over 2000 options in it. If the select is lagging, I can't use it.
#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. ```The text was updated successfully, but these errors were encountered: