Проблема при скрытии меню

160
13 ноября 2018, 19:10

есть хедер с меню, при наведении на лишку появляется меню (изменение стейта, свойство isOpen), в меню много li, каждая это запрос по REST на получение контента. При запросе на сервер - появляется Throbber.

Проблема - когда сервер быстро отвечает, и в момент, пока крутится Throbber - быстро убрать мышь с меню - то не сработает событие onMouseLeave, и соответственно не скроется меню.

<header className={styles['header']}>
            <Throbber  />
        <ul className={styles['header__list']}>
            <li className={styles['header__list_item']}
                onMouseLeave={this.handlerHideMenu.bind(this)}
                onMouseOver={this.handlerShowMenu.bind(this)} >
                <FontAwesome
                    name='bars'
                    className={styles['header__menu_icon']} />
                {this.state.data.commands ?
                    <MainMenu
                        isOpen={this.state.isOpenMainMenu}
                        commands={this.state.data.commands}
                        onItemSelect={this.props.onItemSelect}
                    /> : ''}
            </li>
        </ul>
        <Popup className={styles['popup']}/>
    </header>