@mui v5 搭配 React Hook Form 7 时Autocomplete组件无下拉选项问题

问题原因 #

你的代码核心问题是自定义TextField的InputProps时没有合并Autocomplete传入的默认属性，导致Autocomplete注入的下拉弹窗触发按钮、事件监听等逻辑全部丢失，所以组件表现和普通TextField完全一致。

具体错误点 #

• 两处Autocomplete的renderInput回调中，你给TextField传入的InputProps直接覆盖了params自带的InputProps，而Autocomplete的下拉图标、弹窗控制逻辑都绑定在params.InputProps上，覆盖后相关功能自然失效。
• 第一个州选择的Autocomplete没有显式配置getOptionLabel，虽然字符串数组场景下默认逻辑可以运行，但显式配置兼容性更好。

修复方案 #

将所有TextField的InputProps改为先解构params.InputProps，再叠加你的自定义配置即可，示例如下：

// 州选择的TextField部分修改
<TextField
  {...params}
  error={!!errors?.state}
  helperText={errors?.state?.message}
  label="State (Optional)"
  variant="outlined"
  size="small"
  InputProps={{
    ...params.InputProps, // 保留Autocomplete注入的下拉按钮等逻辑
    startAdornment: (
      <InputAdornment position="start">
        <LocationOnIcon
          color={errors?.state ? 'error' : 'inherit'}
        />
      </InputAdornment>
    ),
  }}
/>

国家选择的TextField部分做完全相同的InputProps合并修改即可解决问题。

内容的提问来源于stack exchange，提问作者J. Jackson