Material UI 自动完成：突出显示的选项应成为输入值

Question

当用户使用键盘上的箭头键浏览选项时，我从突出显示的选项中获取值并将其用作当前输入值（此处的输入有其自己的状态）。

不幸的是，将选项的标题或值保存为输入后，选项的突出显示状态会丢失。有没有办法不丢失呢？

这是一个例子：

https://codesandbox.io/s/modern-rgb-5tew1p?file=/demo.tsx

PS：虽然这个属性听起来像是为此而设计的，但includeInputInList没有帮助。

提前致谢！

Answer 1

试试这个（我对您的代码做了一些更改，例如添加reason和isOptionEqualToValue）：

export default function ComboBox() {
  const [input, setInput] = React.useState(null);

  const handleInputChange = (event, value) => {
    setInput(value);
  };

  const handleHighlightChange = (event, option, reason) => {
    if (option && reason === "keyboard") {
      setInput(option);
    }
  };

  const handleFilterOptions = (currentOptions) => currentOptions;

  return (
    <Autocomplete
      id="combo-box-demo"
      value={input}
      onChange={handleInputChange}
      options={top100Films}
      isOptionEqualToValue={(option, value) => option.label === value.label}
      includeInputInList={true}
      onHighlightChange={handleHighlightChange}
      getOptionLabel={(option) => option.label}
      filterOptions={handleFilterOptions}
      style={{ width: 300 }}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  );
}