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

Question

我在一个项目中使用Autocomplete component from Material-UI。由于我有很多渲染选项，因此虚拟化将非常有益。所以我从react-window 的文档中的the virtualized example 开始。一切都很好，但是该项目已经依赖于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 Autoselect 组件中的选项的好方法？我应该使用List以外的东西吗？

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

Answer 1

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

要使滚动功能正常工作，您需要确保滚动元素具有“列表框”的角色。

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

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