javascript - 尝试将焦点切换到另一个输入字段，但浏览器会自动聚焦表单中的“第一个”输入字段（仅限 Safari）

Question

我的 React Web 应用程序强制将焦点放在表单中的第一个输入字段上，即使我用鼠标主动更改它（我可以通过 Tab 切换输入字段）。

所以我尝试调试只是为了找出问题发生的原因或位置。但我相信这可能与 HTML 以及我不知道的输入字段的工作方式有关，或者可能与某些特定于浏览器的功能有关，因为这仅发生在 Safari 而不是 Chrome 中。

React 应用程序使用以下代码创建输入字段列表。Skills是一个默认情况下包含三个空字符串的数组，例如["", "", ""].

该Keyword组件如以下代码片段所示呈现。

{Skills.map((i, index) => {
   return (
      <Keyword
         key={index}
         value={i}
         type="text"
         className={css(inheritedStyles.formInput)}
         changed={e => onListChange(e, 'Skills', index)}
         clicked={e => onListRemove(e, index, 'Skills')}
       />
   );
})}

  render() {
    const { changed, clicked, value } = this.props;
    return (
      <div>
        <input value={value} className={css(styles.formInput)} type="text" onChange={changed} />
        <a href="#remove-skill-field" onClick={clicked}>
          <svg className={css(styles.removeKeyword)} viewBox="0 0 96 96">
            <path
              fill={this.props.color}
              fillRule="evenodd"
              d="M48,44.8180195 L85.5756764,7.24234308 L87.1666667,5.65135282 L90.3486472,8.83333333 L88.7576569,10.4243236 L51.1819805,48 L90.3089626,87.1269821 L91.8999529,88.7179724 L88.7179724,91.8999529 L87.1269821,90.3089626 L48,51.1819805 L8.87301788,90.3089626 L7.28202762,91.8999529 L4.10004711,88.7179724 L5.69103736,87.1269821 L44.8180195,48 L7.24234308,10.4243236 L5.65135282,8.83333333 L8.83333333,5.65135282 L10.4243236,7.24234308 L48,44.8180195 Z"
            />
          </svg>
        </a>
      </div>
    );
  }

所以我希望这会在一行中产生（默认情况下）3个空输入字段，我可以通过点击和标签在它们之间自由导航。

三个输入字段确实出现并且是空的，但是，当我尝试单击第二个或第三个输入字段时，Safari 会自动聚焦第一个输入字段。

有人知道这是为什么吗？感谢所有帮助！

标签： javascripthtmlcssreactjssafari