React Hook Form与Prime React Password组件的错误聚焦异常问题

问题现象 #

• 当React Hook Form结合PrimeReact Password组件使用时，若Password触发必填校验错误（内容为空），且它是表单中唯一错误字段，会出现React Hook Form报错、无法自动聚焦到密码输入框的问题。
• 仅在Password作为唯一错误字段时触发，下拉框、复选框等其他PrimeReact组件未测试。
• 已知可通过提交按钮禁用（校验通过前不允许提交）规避，但该方案非首选。

可能原因 #

1. 组件适配冲突：PrimeReact Password组件的内部状态管理、错误处理逻辑，与React Hook Form的自动聚焦机制存在兼容性问题。当它作为唯一错误字段时，RHF的自动聚焦逻辑无法正确识别并触发Password组件的焦点方法。
2. 注册方式问题：若直接使用RHF的register方法绑定Password组件，可能因组件内部封装的特殊性，导致错误状态同步不及时，进而影响焦点触发。

可行修复方案（无需禁用提交按钮） #

方案1：用RHF Controller组件接管Password #

通过Controller显式控制组件的状态、校验和错误信息，确保RHF能完全接管错误处理与焦点逻辑：

import { Controller, useForm } from "react-hook-form";
import { Password } from "primereact/password";

function App() {
  const { control, handleSubmit, formState: { errors } } = useForm();
  
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="password"
        control={control}
        rules={{ required: "密码不能为空" }}
        render={({ field, fieldState: { error } }) => (
          <Password
            {...field}
            placeholder="请输入密码"
            error={!!error}
            helperText={error?.message}
          />
        )}
      />
      <button type="submit">提交</button>
    </form>
  );
}

方案2：手动触发错误字段聚焦 #

在表单提交失败时，手动获取Password组件的DOM实例并触发聚焦：

import { useRef } from "react";
import { useForm } from "react-hook-form";
import { Password } from "primereact/password";

function App() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const passwordRef = useRef(null);
  
  const onSubmit = (data) => console.log(data);
  
  const handleFormSubmit = async (data) => {
    const isValid = await handleSubmit(onSubmit)(data);
    if (!isValid && errors.password) {
      passwordRef.current?.focus();
    }
  };

  return (
    <form onSubmit={handleFormSubmit}>
      <Password
        ref={passwordRef}
        {...register("password", { required: "密码不能为空" })}
        placeholder="请输入密码"
        error={!!errors.password}
        helperText={errors.password?.message}
      />
      <button type="submit">提交</button>
    </form>
  );
}

底层问题确认 #

该问题大概率属于React Hook Form与PrimeReact Password组件的适配兼容性问题，而非普通代码实现错误。可通过以下方式进一步验证：

• 测试PrimeReact的InputText等基础输入组件是否存在相同问题，若仅Password出现异常，则说明是该组件的特殊实现导致。
• 查看React Hook Form和PrimeReact的GitHub Issues，确认是否为已知Bug。

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