MUI Autocomplete结合Formik设置inputValue后无法编辑求助

问题分析 #

你遇到的核心问题是错误使用inputValue绑定Formik表单值，却未实现对应的onInputChange回调同步输入框内容，导致组件完全受控且无法响应用户操作。另外Autocomplete缺失value属性，未正确关联选项对象。

修正后的代码 #

<Autocomplete                  
  name="doctor.speciality"
  options={specialities}
  getOptionLabel={(option) => option.value}
  // 从选项数组中匹配Formik存储的字符串值，找到对应选项对象
  value={specialities.find(s => s.value === formik.values.doctor?.speciality) || null}
  onChange={(event, selectedOption) => {
    // 根据选中选项更新Formik字段，无选中时设为空字符串
    formik.setFieldValue(
      "doctor.speciality",
      selectedOption ? selectedOption.value : ""
    );
  }}
  id={formik.values.doctor.id}
  renderInput={(params) => (
    <TextField
      {...params}
      error={
        formik.touched.doctor?.speciality &&
        Boolean(formik.errors.doctor?.speciality)
      }
      onBlur={() =>
        formik.setFieldTouched("doctor.speciality", true)
      }
      label="Speciality"
      variant="filled"
    />
  )}
/>

关键修改点 #

• 替换inputValue为value：value绑定的是Autocomplete选中的选项对象，而非输入框临时文本。通过specialities.find()匹配Formik存储的字符串值，确保初始值正确对应到选项。
• 简化onChange逻辑：直接根据选中选项更新Formik字段，无选中时设为空字符串。
• 移除手动输入控制：让Autocomplete内部管理输入框文本状态，无需手动绑定inputValue，用户即可正常输入、删除内容并查看选项。

如果需要支持用户输入选项外的自定义内容，才需要搭配使用inputValue和onInputChange，但你的场景是更新已有用户数据，选择预设speciality的模式下，使用value的方案更适配。

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