如何将 Material-UI Autocomplete 与 react-virtualized 一起使用？

Question

我将文档中的 Autocomplete component from Material-UI in a project. Since I have a lot of options to render, virtualization would be very beneficial. So I started from the virtualized example 与 react-window 一起使用。一切都很好，但该项目已经依赖于 react-virtualized，我想避免添加一个解决类似问题的新项目。因此，基于 react-window 示例，我尝试使用 react-virtualized.

中的 List 重新实现它

代码示例

https://codesandbox.io/s/sleepy-hypatia-igog8?fontsize=14&hidenavigation=1&module=%2Fsrc%2FVirtualizedAutocomplete.js&theme=dark

问题

如上面的沙盒所示，它有点 的作用。 不起作用的是键盘导航。您可以使用键盘导航，但是当您导航到可见元素之外时，Listbox 不会滚动到突出显示的值。

我试过的：

• 正在为 Autocomplete 组件覆盖 onKeyDown。然而，这完全覆盖了 keydown 功能，需要我重新实现它。
• 使用 onKeyUp 保留 onKeyDown 功能并找到具有 data-focus 属性的元素，然后在 List 组件上使用 scrollToIndex。这适用于某些情况，但如果用户按住该键一段时间并最终到达过扫描渲染项目之外的索引，它就会中断。

有没有人有使用react-virtualized虚拟化Material-UI自动选择组件中的选项的好方法？我应该使用 List 以外的东西吗？

我最后的选择是使用 useAutocomplete 挂钩并重新实现渲染逻辑，但由于我只是在虚拟化之后，所以我想尽可能避免这种情况。

Answer 1

由于 an issue I opened about this on the Material-UI repo 中的回答，我设法让它工作了。

要使滚动功能正常工作，您需要确保滚动元素具有 "listbox" 的作用。

这是演示工作版本的更新代码示例： https://codesandbox.io/s/adoring-saha-n9cr1

唯一改变的是从 ListboxComponent 属性中提取 role 属性 并将其分配给 List 组件。