MUI与React Hook Form多字段setFocus异常：仅最后调用字段获焦点

重现步骤 #

• 在street1、street2、city输入框中输入任意内容
• 点击「Same as billing」复选框，该复选框的onChange事件会将上方字段的值复制到下方字段
• 现象：当针对三个字段分别调用setFocus（判断字段有值时触发），只有最后被调用的字段能获得焦点

原因分析 #

浏览器的焦点管理机制是同步执行覆盖：JavaScript是单线程同步执行的，连续调用setFocus时，浏览器会在当前同步代码块执行完毕后才处理焦点更新，后续的setFocus调用会直接覆盖前面的请求，最终只有最后一次调用生效。

解决方案 #

根据你的需求场景，推荐两种处理方式：

1. 仅给第一个符合条件的字段设焦点（更符合常规交互）

如果你的需求是让第一个满足条件（有值）的字段获得焦点，不要逐个调用setFocus，而是找到第一个目标字段后只调用一次：

// 示例逻辑：优先给street2设焦，其次是city，最后是billingStreet1
if (street2Field.value) {
  street2Field.setFocus();
  return;
}
if (cityField.value) {
  cityField.setFocus();
  return;
}
if (billingStreet1Field.value) {
  billingStreet1Field.setFocus();
}

2. 异步延迟触发（特殊场景下使用）

如果确实需要让多个字段依次获得焦点（比如引导用户操作），可以用setTimeout将焦点调用放入异步队列，给浏览器足够时间处理每个焦点事件：

street2Field.setFocus();
setTimeout(() => cityField.setFocus(), 150);
setTimeout(() => billingStreet1Field.setFocus(), 300);

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