Material UI 5.0：当自动完成值为空时，每个项目都被选中

Question

当前行为

当 Input 为 null 时，样式高亮显示为灰色（类似这样）

这是我当前的代码

<Field
  name="day"
  render={({ input }) =>
      <Autocomplete
         options={this.days}
         getOptionLabel={(option) => {
              return option.toString() 
          }}
          {...input}
          onChange={(e, val) => {
              input.onChange(val);
          }}
          isOptionEqualToValue={(option, value) => {
              if (value === "" || value === option)
                  return true;
          }}
       renderInput={(params) => <TextField {...params} label="Day" variant="outlined" />}
      />
} />

注意：我对 react-final-form 使用“Field”包装器（因为 mui-rff 尚未升级到 MUI 5.0）

预期行为

在这张图片上，当我 select 一个值时，它与我的选项数组匹配并且样式恢复正常。

上下文

Chrome: 94.0.4606.71

Answer 1

我终于找到了解决办法。

我需要通过添加此选项将 {...input} 作为第一个道具移动到 options={this.days} 之前：value={null}.

注意声明的地方 {...input}。

Material UI 5.0：当自动完成值为空时，每个项目都被选中

Material UI 5.0 : When autocomplete value is empty every items are selected

reactjs

autocomplete

material-ui

当前行为

预期行为

上下文