У меня есть меню, реализованное после Material UI's Menu со значком. Цель состоит в том, чтобы позволить пользователям навести курсор мыши на клавиатуре или на клавиатуре и сосредоточиться на 3 точках, а не на щелчке, чтобы открыть меню. Меню закрывается, когда по одному элементу щелкают мышью или клавишей ввода.
Чтобы достичь этого, я добавил onFocus и onMouseOver в Menu. Работает, как и ожидалось, с помощью мыши / наведения. Проблема в клавиатуре. Фокус никогда не покидает значок 3 точки после открытия меню. Мне нужно сосредоточиться на меню или первом пункте меню. Как мне решить эту проблему? Спасибо!
<IconButton
onFocus={handleClick}
onMouseOver={handleClick}
>
<MoreVertIcon />
</IconButton>
<Menu
id="long-menu"
anchorEl={anchorEl}
keepMounted
open={open}
onClose={handleClose}
>
{options.map(option => (
<MenuItem />
))}
</Menu>
Песочница с полным кодом здесь