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

Question

我在一个项目中使用Material-UI的Autocomplete 组件。由于我有很多渲染选项，虚拟化将非常有益。所以我从文档中的虚拟化示例开始react-window。一切都很好，但该项目已经依赖于react-virtualized，我想避免添加一个解决类似问题的新项目。因此，基于react-window示例，我尝试使用Listfrom重新实现它react-virtualized。

代码示例

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

问题

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

我试过的：

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

有没有人有好的方法react-virtualized来虚拟化 Material-UI Autoselect 组件中的选项？我应该使用其他东西List吗？

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

Answer 1

由于我在 Material-UI repo 上打开的一个问题的答案，我设法让它工作。

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

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

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