时间戳

首页 > 解决方案 > 在自动完成之外单击时，Material-UI 自动完成输入重置

reactjs - 在自动完成之外单击时，Material-UI 自动完成输入重置

问题描述

我正在使用 Material-UI 中的基本自动完成功能，选项加载良好并且能够成功过滤。

但是，一旦我们过滤了选项，只需单击外部，过滤器就会被清除，下拉菜单会被排序/重置。

这基本上导致了移动设备上的可访问性问题。当我们将android语音翻转并过滤结果时，当用户尝试选择选项时，它总是选择不是过滤结果的选项。看起来，过滤器休息了，下拉菜单洗牌了。我观察到由于过滤器被重置，当它失焦时导致这里出现问题。它适用于自动选择。但在我的用例中，我不想自动选择。

export default function App() {
  const [state, setState] = useState();
  return (
    <Autocomplete
      options={["a", "b", "c"]}
      renderInput={(params) => (
        <TextField {...params} onChange={(e, v) => setState(v)} />
      )}
      value={state}
    />
  );
}

标签： reactjsmaterial-ui

解决方案

您可以使用freeSoloprop允许在 : 中的任意输入值Autocomplete：

<Autocomplete freeSolo

推荐阅读