react-material-ui-form-validator的TextValidator在Firefox下错误字段锚定失效

• 浏览器默认focus滚动行为差异：Firefox对focus()方法的默认滚动对齐策略和Chrome、Safari不同，Chrome默认会将聚焦元素尽量对齐视口顶部，保证元素完整露出；而Firefox默认仅做最小幅度滚动，只要元素有部分进入视口就停止，因此经常出现输入框上半部分（含标签、错误提示）被截断的情况。
• 渲染时序冲突：ValidatorForm的onError回调触发时，输入框的错误提示还未完成渲染，调用focus()时计算的元素位置没有包含新增的错误提示高度，等错误提示渲染完成后，输入框位置下移，就会超出视口范围。Firefox和Chrome的UI渲染优先级不同，该问题在Firefox上更容易触发。
• TextValidator组件结构问题：你绑定的id是挂在TextValidator内部的原生input元素上，input本身高度较小，Firefox滚动时仅保证input部分可见，上方的Material UI标签、辅助文本区域不会被纳入滚动计算范围，自然无法完整显示整个输入组件。

替换纯focus逻辑，搭配scrollIntoView主动控制滚动行为，该方法兼容性好，可明确指定滚动对齐规则，同时用setTimeout避开渲染时序冲突，还可以简化原有冗余的id判断逻辑：

const handleErrors = (errors) => {
  // 直接找到首个校验失败的元素，无需逐个判断id
  const firstInvalidField = errors.find(field => !field.state.isValid);
  if (!firstInvalidField) return;

  // 加setTimeout等待错误提示渲染完成，避免位置计算偏差
  setTimeout(() => {
    const targetInput = document.getElementById(firstInvalidField.props.id);
    if (!targetInput) return;
    targetInput.focus();
    // 配置scrollIntoView保证元素完整显示，block设为start表示对齐视口顶部，也可改为center居中显示
    targetInput.scrollIntoView({
      block: 'start',
      inline: 'nearest'
    });
  }, 0);
};

如果不需要滚动动画，可给scrollIntoView补充behavior: 'auto'参数，滚动速度更快。

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