Почему tabindex здесь работает только с 0, а не с остальными?

Question

Вот метод рендеринга в моем компоненте React, который создает пользовательский интерфейс на скриншотах ниже.Когда я использую приложение, после выбора входа мне нужно дважды нажать вкладку, чтобы выбрать первую монету.Однако следующие вкладки начинают выбирать различные части браузера?

render() {
  const { coins } = this.state;

  return (
    <section id="search-modal">
      <header className="search-header">
        <input
          id="coin-search"
          type="text"
          placeholder="Search"
          onChange={() => this.handleChange()}
        />
        <button className="close-modal-x" onClick={this.props.closeSquareEdit} />
      </header>
      <ul className="coins-list">
        { coins !== 'undefined'
          ? coins.map((coin, i) => (
            <li
              key={coin.id}
              tabIndex={i}
              onClick={() => this.handleSelect(coin)}
            >
              {coin.name}
              <span className="symbol">({coin.symbol})</span>
            </li>))
          : null
        }
      </ul>
    </section>
  );
}

^ Здесь после выбора 2 вкладок Bitcoin, кажется, 3-я вкладка повторно выбирает вход, а 4-й щелчок вкладки выбирает URL браузера.

Answer 1

Разобрался!Мне нужно было role="button"

<ul className="coins-list">
  { coins !== 'undefined'
    ? coins.map((coin, i) => (
      <li
        key={coin.id}
        role="button"
        tabIndex={i}
        onFocus={() => this.setFocus(coin)}
        onClick={() => this.handleSelect(coin)}
      >
        {coin.name}
        <span className="symbol">({coin.symbol})</span>
      </li>))
    : <li>Loading...</li>
  }
</ul>

Однако странное количество вкладок, необходимых для перехода к первой li, все еще там.Мне нужно дважды нажать на вкладку ... затем еще несколько раз, прежде чем он начнет корректно перемещаться по списку.

Добавлена ​​новая функция, которую я изменил:

setFocus(coin) {
  console.log('setFocus', coin.id);
  this.setState({ focused: coin });
}

handleSelect(coin) {
  console.log('handleSelect', coin.id);
  this.setState({ focused: coin });
  this.props.openEdit(true, coin);
}