jurokapsiar
commented
4 years ago Virtualization is possible with react-virtualized even now, see https://codesandbox.io/s/fluent-ui-example-bx012
Even though this has some accessibility limitations, I think you can follow the codesandbox for now. Couple of points to be careful about:
- make sure to use aria-posinset and aria-setsize
- shorthand API in menu passes some of the props and variables down to its items, this is not available when you use the children API (Menu.Item component), so props like 'vertical' need to be passed to the items as well. Also, if you have some theme overrides in the menu, double check if they are correctly applied - you might need to pass variables to the items as well
- react-virtualized wraps items in a grid container which breaks the semantic structure. react-window would be preferred
Feature Request
For menu with large number of items, there will be good to support virtualization similar to that react list virtualizied provided
Problem description
Large menu collection will bring a considerable latency, therefore support for virtualization is essential
Proposed solution
Potentially react virtualized list can be used beneath menu list
MVP
[Fork, update, and replace this sandbox if you can show the proposed solution]: https://codesandbox.io/s/stardust-ui-example-8ismt