让键盘导航与 MUI Autocomplete 和 SimpleBar 一起工作以做出反应

Question

我正在尝试将 Simplebar 滚动条添加到 MUI 材质自动完成组件，而不是默认浏览器。一切正常，但这样做我失去了使用键盘导航选项列表的能力。

MUI 文档中有这个 sn-p

列表框组件 如果您提供自定义 ListboxComponent 道具，则需要确保预期的滚动容器将角色属性设置为列表框。这可确保滚动的正确行为，例如在使用键盘导航时。

但我不知道该怎么做。

以下代码来自 MUI 文档，第一个带有自定义 ListboxComponenet 和缩短电影列表的自动完成示例。 (https://mui.com/components/autocomplete/)

import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';

import SimpleBar from "simplebar-react";
import "simplebar/dist/simplebar.min.css";

export default function ComboBox() {
  return (
    <Autocomplete
      disablePortal
      id="combo-box-demo"
      options={top100Films}
      ListboxComponent={SimpleBar}
      sx={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="Movie" />}
    />
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
  { label: 'City of God', year: 2002 },
  { label: 'Se7en', year: 1995 },
  { label: 'The Silence of the Lambs', year: 1991 },
  { label: "It's a Wonderful Life", year: 1946 },
  { label: 'Life Is Beautiful', year: 1997 },
  { label: 'The Usual Suspects', year: 1995 },
  { label: 'Léon: The Professional', year: 1994 },
  { label: 'Spirited Away', year: 2001 },
  { label: 'Saving Private Ryan', year: 1998 },
  { label: 'Once Upon a Time in the West', year: 1968 },
  { label: 'American History X', year: 1998 },
  { label: 'Interstellar', year: 2014 },
  { label: 'Casablanca', year: 1942 },
  { label: 'City Lights', year: 1931 },
  { label: 'Psycho', year: 1960 },
  { label: 'The Green Mile', year: 1999 },
  { label: 'The Intouchables', year: 2011 },
  { label: 'Modern Times', year: 1936 },
  { label: 'Raiders of the Lost Ark', year: 1981 },
  { label: 'Rear Window', year: 1954 },
  { label: 'The Pianist', year: 2002 },
  { label: 'The Departed', year: 2006 },
  { label: 'Terminator 2: Judgment Day', year: 1991 },
  { label: 'Back to the Future', year: 1985 },
  { label: 'Whiplash', year: 2014 },
  { label: 'Gladiator', year: 2000 },
  { label: 'Memento', year: 2000 },
];

我也尝试了以下方法，但似乎也不起作用。

ListboxComponent={(props) => <SimpleBar {...props} role="listbox" />}

任何帮助将不胜感激，谢谢。

Answer 1

这个问题其实很复杂。查看它的实现，<SimpleBar /> 没有将 React ref 或 role 属性传递给正确的元素。我认为正确的元素是.scrollbar-content，它嵌套非常深，基本上无法触及。

预计到达时间：如果你想对document.querySelectorAllsetAttribute 恶作剧变得俗气，那是行不通的。 ref 还需要指向正确的元素，我认为这在工作区方面是不可编码的。

我能想到的最干净的解决方案是自己使用 Yarn 3 (?) 和 patch simplebar-react，将所需的道具传递给 .scrollbar-content。然后你做：

const ListboxSimpleBar = React.forwardRef(function ListboxSimpleBar(props, ref) {
  return <SimpleBar {...props} role='listbox' listboxRef={ref} />
}

// ...
ListboxComponent={ListboxSimpleBar}

不太干净的解决方案是 fork the repo，对其进行修补，然后将其安装为 git 依赖项。或者一旦您确定它可以工作并作为常规依赖项安装，就发布到 npm。如果您不使用 Yarn 3 (?)，这是推荐的方法。它更乏味并且不会收到更新，但它是一个存在的选项。

最不干净的解决方案是在您自己的工作区中复制 simplebar-react 代码，对其进行编辑并导入它来代替真正的 simplebar-react。更哈克、更混乱、更有趣的选项 2，但只是勉强。