开启freeSolo后Mui Autocomplete+react-hook-form无法重置值的问题

我使用结合react-hook-form Controller的MUI Autocomplete组件时，开启freeSolo属性后组件值无法被重置。比如调用resetField("selBinvrk")，未开启freeSolo时一切正常，开启后就失效了。以下是我的组件及提交函数代码：

<Controller
      name={name}
      control={control}
      rules={rules}
      render={({ field: { onChange, value } }) => (
        <Autocomplete
          disabled={!disabled ? false : true}
          value={value}
          freeSolo={freeSolo}
          //autoSelect={autoSelect}
          options={options}
          getOptionLabel={getOptionLabel}
          isOptionEqualToValue={isOptionEqualToValue}
          /* getOptionSelected={(option, value) => {
              console.log('get option selected: ', option, value); 
              return value === undefined || value === "" || option.ID === value.ID}
             } */
          //console.log(item);
          onChange={(event, item) => {
            //console.log(item);
            onChange(item);
          }}
          //renderOption={renderOption}
          renderInput={(params) => (
            <TextField
              {...params}
              label={label}
              variant="outlined"
              error={isError}
              helperText={errorMessage}
              sx={sx}
              inputRef={inputRef}
            />
          )}
        />
      )}
    />

const onSubmit = (data, e) => {
    console.log("hä: ", e);
    resetField("selBinvrk");
    resetField("selMenge");
    mutate({
      binv_id: data.selBinv.ID,
      bsa_id: data.selBinvrk?.BSA_ID || 0,
      binvrk_id: data.selBinvrk?.ID || 0,
      selMenge: data.selMenge,
      bsm_id: data.selBsm.ID,
    });
    //recaptchaRef.current.execute();
    //mutate(data);
  };

核心修改点 #

1. 给Autocomplete添加isClearable属性，同时确保组件的value和onChange正确处理null值
2. 调用resetField时明确指定重置值为null

修改后的组件代码 #

<Controller
  name={name}
  control={control}
  rules={rules}
  render={({ field: { onChange, value } }) => (
    <Autocomplete
      disabled={disabled}
      value={value ?? null} // 处理undefined，转为Autocomplete识别的空值null
      freeSolo={freeSolo}
      isClearable={true} // 添加清空属性，辅助组件处理空状态
      options={options}
      getOptionLabel={getOptionLabel}
      isOptionEqualToValue={isOptionEqualToValue}
      onChange={(event, item) => {
        onChange(item || null); // 清空时传递null给react-hook-form
      }}
      renderInput={(params) => (
        <TextField
          {...params}
          label={label}
          variant="outlined"
          error={isError}
          helperText={errorMessage}
          sx={sx}
          inputRef={inputRef}
        />
      )}
    />
  )}
/>

修改后的提交函数 #

const onSubmit = (data, e) => {
  console.log("hä: ", e);
  resetField("selBinvrk", { value: null }); // 明确指定重置为null
  resetField("selMenge", { value: null });
  mutate({
    binv_id: data.selBinv.ID,
    bsa_id: data.selBinvrk?.BSA_ID || 0,
    binvrk_id: data.selBinvrk?.ID || 0,
    selMenge: data.selMenge,
    bsm_id: data.selBsm.ID,
  });
};

原因说明 #

开启freeSolo后，Autocomplete允许用户输入自定义文本，此时组件内部的空状态对应值是null，而非空字符串。react-hook-form默认重置会将字段设为空字符串，导致Autocomplete无法识别这个空值，因此需要明确将重置值设为null，同时让组件的value和onChange逻辑统一处理null值，配合isClearable属性确保组件状态同步。

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