使键盘导航与MUI自动完成和SimpleBar一起工作以作出反应

Question

我试图将Simplebar滚动条添加到MUI资料自动完成组件中，而不是默认的浏览器组件中。所有的工作，但这样做，我已经失去了使用键盘导航选项列表的能力。

有一个来自MUI文档的片段

ListboxComponent --如果您提供了自定义的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，它嵌套得很深，基本上是不可触摸的。

ETA:，如果你想让document.querySelectorAll setAttribute恶作剧变得俗气的话，那是行不通的。ref还需要指向正确的元素，我认为这在工作区一侧是不可编码的。

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

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

// ...
ListboxComponent={ListboxSimpleBar}

不太干净的解决方案是分叉回购，对其进行修补，并将其作为git依赖项安装。或发布到npm，一旦您确定它的工作和安装作为一个常规的依赖。如果不使用Yarn 3 ()，这是推荐的方法。这要繁琐得多，不会接收更新，但这是一个存在的选项。

最不干净的解决方案是在您自己的工作区中复制简单条形反应代码，编辑它并导入它以代替真正的简单条形反应。更麻烦，更混乱，更有趣的选择2，但只是勉强。