MUI Autocomplete下拉选项添加可编辑文本框后无法编辑的求助

问题场景 #

在MUI Autocomplete的下拉选项中通过renderOption属性添加了可编辑文本框，但无法正常编辑——Autocomplete的选项选择逻辑会拦截输入操作，点击文本框时直接触发选项选中，无法聚焦输入内容。

解决方案 #

1. 阻止事件冒泡，隔离文本框与Autocomplete选择逻辑 #

在文本框的onMouseDown和onKeyDown事件中阻止事件冒泡，避免触发Autocomplete的选项选中逻辑，确保输入框能正常获取焦点并接收输入。

2. 实时同步输入值到数据源 #

给文本框添加onChange事件，将输入的新值同步到对应option的属性中，保证编辑后的状态能被保存和展示。

3. 用状态管理维护数据源 #

Autocomplete的options需通过React状态（如useState）维护，确保编辑后的数据能实时同步到下拉选项中。

修改后的代码示例 #

调整RangeRender组件 #

const RangeRender = ({ option: { min, max } }) => {
  const { labelPostfix, labelPrefix } = useContext(DropDownContext);
  const inputProps = labelPrefix ? {
    startAdornment: <InputAdornment position="start">{labelPrefix}</InputAdornment>,
  } : labelPostfix ? {
    endAdornment: <InputAdornment position="end">{labelPostfix}</InputAdornment>,
  } : {};

  // 阻止事件冒泡，避免触发Autocomplete选项选择逻辑
  const stopEventPropagation = (e) => {
    e.stopPropagation();
  };

  // 更新对应option的最小值
  const handleMinChange = (e) => {
    min.value = parseFloat(e.target.value) || 0;
  };

  // 更新对应option的最大值
  const handleMaxChange = (e) => {
    max.value = parseFloat(e.target.value) || 0;
  };

  return (
    <Box style={{ display: 'flex', gap: 12 }}>
      <NummberField
        type="number"
        variant="outlined"
        value={min.value}
        InputProps={inputProps}
        onMouseDown={stopEventPropagation}
        onKeyDown={stopEventPropagation}
        onChange={handleMinChange}
      />
      <NummberField
        type="number"
        variant="outlined"
        value={max.value}
        InputProps={inputProps}
        onMouseDown={stopEventPropagation}
        onKeyDown={stopEventPropagation}
        onChange={handleMaxChange}
      />
    </Box>
  );
};

用状态管理维护options数据源 #

确保你的初始数据源通过useState维护，而非静态数组：

const [options, setOptions] = useState(initialOptions); // initialOptions为你的初始选项数组

优化CustomOption组件（可选） #

如果点击文本框外的区域仍误触选项选择，可给容器添加条件性事件拦截：

const CustomOption = ({ selected, option }) => {
  const handleContainerClick = (e) => {
    // 仅点击复选框时触发Autocomplete选择逻辑
    if (!e.target.closest('[role="checkbox"]')) {
      e.stopPropagation();
    }
  };

  return (
    <div 
      style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}
      onClick={handleContainerClick}
    >
      <Checkbox
        size="small"
        color="primary"
        checked={selected}
        style={{ marginRight: 8 }}
        icon={<RadioButtonUncheckedIcon />}
        checkedIcon={<RadioButtonCheckedIcon />}
      />
      {isInstanceOfIRange(option) ? <RangeRender option={option} /> : <SingleRender option={option} />}
    </div>
  );
};

关键说明 #

• stopPropagation()是核心：它阻止文本框的输入/点击事件向上冒泡到Autocomplete选项容器，避免触发选项选中逻辑。
• 必须同步更新option属性：否则编辑后的值无法保存，下拉选项会始终显示旧值。
• 数据源需为可变状态：静态数组无法同步编辑后的内容，必须用状态管理维护。

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