Material UI Autocomplete首次挂载输入时onInputChange触发两次问题

问题原因 #

你遇到的跨浏览器触发次数不一致问题，主要由几个配置项共同作用导致：

• 重复焦点控制属性冲突：同时给TextField设置了autoFocus和focused，Chrome/Firefox中这两个属性会引发输入框两次焦点状态变更，间接触发onInputChange；而Safari对这类属性的处理更收敛，仅触发一次。
• 动态open状态引发重渲染：open={!!value || !!inputValue}的逻辑会随inputValue变化频繁切换弹窗状态，组件重渲染过程中可能再次触发输入事件回调。
• 动态Label的额外DOM变更：TextField的label会根据value/inputValue动态切换为空或提示文本，这类DOM操作在Chrome/Firefox中可能触发额外的输入事件。

解决方法 #

1. 移除冗余的焦点属性 #

删掉TextField的focused属性，仅保留autoFocus即可，避免双重焦点触发：

<TextField
  {...params}
  fullWidth
  label={!!value || !!inputValue ? "" : "Search a location"}
  autoFocus
  InputLabelProps={{ shrink: false }}
/>

2. 优化open状态计算逻辑 #

用useMemo缓存open状态，减少不必要的重渲染：

const isOpen = useMemo(() => !!value || !!inputValue, [value, inputValue]);

// 对应Autocomplete的open属性修改为：
open={isOpen}

3. 调整Label显示逻辑 #

改用shrink属性控制Label的显示状态，避免直接替换为空字符串带来的DOM操作：

<TextField
  {...params}
  fullWidth
  label="Search a location"
  autoFocus
  InputLabelProps={{ 
    shrink: !!value || !!inputValue 
  }}
/>

4. 回调内增加防重复判断 #

如果上述方法仍未解决，可以在onInputChange内判断新旧值是否一致，避免重复执行逻辑：

onInputChange={(event, newInputValue) => {
  if (newInputValue === inputValue) return;
  console.log("onInputChange()");
  setInputValue(newInputValue);
}}

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