iOS设备React应用两个文本输入框仅可聚焦首个点击的输入框问题求助

该问题为iOS Safari特有bug，由聚焦态盒模型尺寸变动触发渲染异常、React受控组件重渲染元素复用逻辑和iOS触摸事件优先级冲突两个原因共同导致，可按以下方案修复：

• 统一盒模型渲染规则，修改SCSS样式规避Safari重绘bug
  现有:focus样式修改了padding值，配合border变化会导致输入框总尺寸发生微变，iOS Safari重新计算元素位置时会出现聚焦锚点错乱，修改后的SCSS如下：

.formField {
  input {
    border: 1px solid var(--line-color);
    width: 380px;
    height: 45px;
    background-color: var(--background-color1);
    padding: 10px;
    font-size: 19px;
    font-family: var(--font-family-semibold);
    color: var(--text-color);
    box-sizing: border-box;
    /* 新增以下3行修复iOS聚焦bug */
    transform: translateZ(0);
    touch-action: manipulation;
    user-select: text;
    &::placeholder {
      font-size: 19px;
      color: var(--placeholder-color);
      font-family: var(--font-family-semibold);
    }
    &:focus {
      /* 确保padding+border总厚度和常态一致，避免盒模型尺寸变化 */
      padding: 9px;
      outline: var(--onfocus-outline);
      border: var(--onfocus-border);
      border-radius: var(--onfocus-border-radius);
    }

    @include for-phone-portrait {
      width: 310px;
      height: 40px;
      /* 移动端同步添加修复属性 */
      transform: translateZ(0);
      touch-action: manipulation;
      user-select: text;
    }
  }
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

• 优化React组件逻辑
  给每个输入框设置固定唯一的key属性，不要使用数组索引作为key，避免重渲染时组件复用导致的聚焦状态错乱。如果是受控输入框，不要给onChange事件添加防抖、节流逻辑，避免state更新延迟和iOS键盘弹出事件冲突，导致自动回跳聚焦。
• 可选兜底方案
  给所有输入框绑定onBlur事件，手动清理激活状态，避免残留的聚焦引用导致回跳，代码示例如下：

// 输入框失焦时手动清除激活状态
const handleInputBlur = () => {
  window.getSelection()?.removeAllRanges();
  if (document.activeElement instanceof HTMLInputElement) {
    document.activeElement.blur();
  }
};

// 组件中使用
<input onBlur={handleInputBlur} {...其他属性} />

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