Вы можете просмотреть мое приложение здесь: https://moon.holdings
Вот репозиторий: https://github.com/Futuratum/moon.holdings
Если вы выберете кнопку [+] Добавить актив, нажмите на кнопкуВ поиске и вкладке поиска есть 2 проблемы.
Ничего не выбирается в первый раз, вам нужно снова перейти на вкладку, чтобы выбрать первый актив.
И что еще более важно после выбора Биткойна, вкладки не выбирают следующий элемент в списке.Вместо этого после 4 вкладок я вижу, что кнопка Coinbase была выбрана вместо другой li.
Здесь вы можете видеть, что каждый li правильно имеет tabindex:
- 1-я вкладка, ничего не выбрано
- 2-я вкладкаВыбран биткойн
- 3-я вкладка, ничего не выбрано
- 4-я вкладка, выбрана кнопка Coinbase:
JSX компонента searchModal.js:
render() {
const { assets } = 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.closeSquareEdit} />
</header>
<ul id="coins-list">
{ assets !== 'undefined'
? assets.map((asset, i) => (
<li
key={asset.currency}
role="button"
tabIndex={i}
onFocus={() => this.setFocus(asset)}
onBlur={this.onBlur}
onClick={() => this.handleSelect(asset)}
>
{asset.name}
<span className="symbol">{asset.currency}</span>
</li>))
: <li>Loading...</li>
}
</ul>
</section>
);
}
Основной контейнер: Board.js
return (
<div id="board">
{ this.renderPortfolio(sortedAssets) }
{ edit && this.renderSquareEdit(coin) }
{ search && this.renderSearchModal() }
{ loading && moonPortfolio && <Loading /> }
{ portfolio.length === 0 && <Welcome /> }
<PlusButton toggleSearch={this.handleSearchButton} />
<Affiliates />
<Nomics />
<Astronaut logo={isTrue} />
</div>
);
Метод renderSearch:
renderSearchModal() {
return (
<div>
<Search
handleClose={() => this.toggleSquareEdit(false, {})}
openEdit={this.toggleSquareEdit}
/>
<div id="overlay" onClick={this.handleSearchButton} />
</div>
);
}
Наконец,Компонент affiliates.js
const links = [
{ name: 'coinbase', link: coinbase, h4: 'Buy Bitcoin' },
{ name: 'binance', link: binance, h4: 'Buy Altcoins' },
{ name: 'changelly', link: changelly, h4: 'Swap coins' }
];
export default () => (
<div className="affiliates">
<ul>
{links.map(l => (
<a href={l.link} key={l.name} target="_blank" rel="noopener">
<li className={l.name}>
<h4>{l.h4}</h4>
</li>
</a>
))}
</ul>
</div>
);