如何测试带freeSolo的MUI Autocomplete + React Hook Form输入格式

问题根源 #

原来的pattern规则失效是因为它会校验整个versions数组（而非单个输入项），而TextField的inputProps.pattern在Autocomplete的受控逻辑下不会触发校验。以下是无需重写核心onChange/onInputChange的解决方案：

实现步骤 #

• 自定义Controller校验规则：遍历数组中的每个值，逐一验证格式
• 拦截freeSolo创建动作：利用Autocomplete的onCreateOption方法，只允许符合格式的自定义值被添加

修改后的完整代码 #

<Controller
  defaultValue={[]}
  control={control}
  name='versions'
  rules={{
    required: true,
    validate: (values) => {
      const pattern = /^[a-zA-Z0-9.-]*$/;
      const invalidItem = values.find(item => !pattern.test(item));
      if (invalidItem) {
        return 'Only . - are accepted as special characters.';
      }
      return true;
    }
  }}
  render={({ field: { onChange, value, ...field } }) => (
    <Autocomplete
      {...field}
      freeSolo
      multiple
      autoSelect
      onChange={(event, item) => {
        onChange(item);
      }}
      onCreateOption={(option) => {
        const pattern = /^[a-zA-Z0-9.-]*$/;
        if (pattern.test(option)) {
          // 符合格式才添加到数组
          onChange([...value, option]);
        }
        // 不符合则不做任何操作，阻止添加
      }}
      options={[]}
      value={value || []}
      renderInput={(params) => (
        <TextField
          {...params}
          label="Version(s)"
          margin="normal"
          variant="standard"
          error={!!errors.versions}
          required={value.length === 0}
        />
      )}
    />
  )}
/>

关键说明 #

1. Controller的validate规则：遍历当前选中的所有值，只要有一个不符合格式就返回错误信息，触发错误状态
2. Autocomplete的onCreateOption：捕获freeSolo模式下用户创建自定义选项的动作，先校验格式，只有符合要求才调用onChange更新数组，彻底阻止无效值被添加
3. 移除无效配置：删除TextField的inputProps.pattern，因为Autocomplete会接管输入的受控逻辑，该配置无法生效

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