Autocomplete组件点击全选后输入框仅显示ALL的实现问题

需求：点击Autocomplete组件的「select all」选项时，输入框仅显示「ALL」，不展示其他选项。
问题：已尝试在getOptionLabel函数中添加判断条件，但输入框除显示「ALL」外仍会展示其他项。

核心解决思路 #

要实现这个效果，需要从选中逻辑互斥和标签自定义渲染两个层面入手：

• 保证「ALL」和其他选项不能同时被选中，选「ALL」时自动清空其他项，选其他项时自动移除「ALL」。
• 强制当选中项包含「ALL」时，输入框只显示「ALL」这一个标签。

修改后的完整代码 #

<Autocomplete
  multiple
  label="學生*"
  id="createStudent"
  options={
    studentOptions(index).length > 0
      ? [
          { value: SELECT_ALL, name: 'ALL' },
          ...studentOptions(index)
        ]
      : []
  }
  disableCloseOnSelect
  variant='outlined'
  getOptionLabel={(option) => option.value === SELECT_ALL ? 'ALL' : option.name}
  renderOption={(props, option, { selected }) => (
    <li {...props}>
      <Checkbox
        icon={icon}
        checkedIcon={checkedIcon}
        style={{ marginRight: 8 }}
        checked={selected}
      />
      {option.name}
    </li>
  )}
  // 自定义标签渲染逻辑
  renderTags={(value, getTagProps) => {
    const hasAll = value.some(item => item.value === SELECT_ALL);
    if (hasAll) {
      // 只要选中了ALL，只显示这一个标签
      return [
        <Chip
          label="ALL"
          {...getTagProps({ index: 0 })}
        />
      ];
    }
    // 没选ALL时，按原逻辑显示（保留limitTags=1的效果）
    return value.slice(0, 1).map((option, index) => (
      <Chip
        label={getOptionLabel(option)}
        {...getTagProps({ index })}
      />
    ));
  }}
  renderInput={(params) => (
    <TextField 
      {...params} 
      label="學生*"
    />
  )}
  value={formData.createClass[index].studentList}
  key={studentOptions(index)}
  // 处理ALL和其他选项的互斥选中逻辑
  onChange={(event, newValue) => {
    let processedValue = [...newValue];
    const hasAll = processedValue.some(item => item.value === SELECT_ALL);
    
    if (hasAll) {
      // 选中ALL时，只保留ALL这一项
      processedValue = [{ value: SELECT_ALL, name: 'ALL' }];
    } else {
      // 没选中ALL时，移除可能存在的ALL选项
      processedValue = processedValue.filter(item => item.value !== SELECT_ALL);
    }
    // 调用原有更新逻辑
    handleStudentChange(index, studentOptions(index))(event, processedValue);
  }}
  // 修复选项匹配逻辑，避免判断错误
  isOptionEqualToValue={(option, value) => 
    option.value === value.value || option.name === value.name
  }
/>

关键修改说明 #

1. renderTags 自定义标签：直接拦截标签渲染，只要检测到选中了「ALL」，就只输出「ALL」标签，彻底隐藏其他选中项的显示。
2. onChange 互斥逻辑：从根源上避免「ALL」和其他选项同时存在，选「ALL」时自动清空其他项，选其他项时自动移除「ALL」，保证数据一致性。
3. 修复isOptionEqualToValue：原代码的选项匹配逻辑存在错误，改为通过value或name属性匹配，确保选项选中状态判断准确。

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