Как убрать фокус на кнопке после открытия меню с событием onFocus - PullRequest
1 голос
/ 23 октября 2019

У меня есть меню, реализованное после 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>

Песочница с полным кодом здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...