Material UI 5.0 Autocomplete值为空时所有选项被选中问题求解

当前表现 😯 #

当输入值为空时，所有选项都会被浅灰色高亮，效果如下图所示：

我当前使用的代码如下：

<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版本。

预期表现 🤔 #

当选中某一有效值后，只有选中项会高亮，其余选项样式恢复正常，效果如下图所示：

运行环境 🔦 #

• Chrome版本：94.0.4606.71

问题原因 #

异常的根源是isOptionEqualToValue的判断逻辑有误：你设置了只要value === ""就返回true，这会导致输入值为空时，所有选项都会被判定为和当前值匹配，所以全部触发高亮样式。此外原代码的函数没有覆盖所有返回分支，条件不满足时会返回undefined，不符合MUI Autocomplete的参数要求。

修复方案 #

修改isOptionEqualToValue的逻辑，只有当值非空且与选项相等时才返回true：

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

修改后空值不会匹配任何选项，不会出现全量高亮的情况，选中有效值后只有对应选项会正常高亮，符合预期。

内容的提问来源于stack exchange，提问作者MisterLexisDev