Попытка переключить фокус на другое поле ввода, но браузер автоматически фокусирует «первое» поле ввода в форме (только Safari)

Question

Мое веб-приложение React фокусируется на первом поле ввода в форме, даже если я активно меняю его с помощью мыши (хотя я могу переключать поля ввода с помощью вкладок).

Итак, я попытался отладить, просто чтобы выяснить, что или где происходит проблема. Но я полагаю, что это может иметь какое-то отношение к 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 автоматически фокусируется на первом поле ввода.

Кто-нибудь понял, почему это так? Вся помощь приветствуется!