search

palantir / blueprint

A React-based UI toolkit for the web
https://blueprintjs.com/
Apache License 2.0
20.71k stars 2.17k forks source link

Tabable or otherwise keyboard controllable Menu / MenuItem #3079

Open Enie opened 6 years ago

Enie commented 6 years ago

Environment

Feature request

Popover-menues should be tabable or keyboard-controllable in any other way other than only by hotkeys for exactly one menu-item.

Current buggy behaviour: Going to the menu demo and trying to tab will open the second last menu item in the second menu. tabbing again will open the submenu of the last menu-item. tabbing another time will focus the last menu-item of the submenu.

Setting tabIndexes on each Popover and Menu Item will enable to either tab through popovers or menu items as soon as a menu is opened.

Examples

You can see the before mentioned example here: http://blueprintjs.com/docs/#core/components/menu

Enie commented 6 years ago

I just noticed that one month ago in issue #2863 @giladgray mentioned that he would like to add this feature soon. So I'll just wait patiently and you keep up the good work!

giladgray commented 5 years ago

@Enie hah thanks for noticing. yeah this is basically at the top of my feature list and should be addressed soon-ish?

jkex commented 5 years ago

@giladgray Do you have any updates yet?

bjornhanson commented 5 years ago

This would be very nice to have. Any updates? Is this feature still coming soon?

adidahiya commented 5 years ago

No, this is not currently in progress. Open to PRs.

eastside commented 5 years ago

FYI for anyone else who happens to stumble upon this: A Blueprint.js Select does respect keyboard events. It's (unfortunately) less flexible and harder to use than a plain Menu, but if it's enough for your needs, go for it.

idreyn commented 5 years ago

If anyone's interested, my workaround has been to use Reakit to build a menu component and apply Blueprint CSS styles to match our app's look and feel, as seen in this pull request.

adidahiya commented 4 years ago

I think Menu navigation should work with tabbing as well as arrow keys. Pasting @cnrudd's comments from #3881 here:

A user could:

  • navigate up/down the menu with ArrowUp/Down keys
  • move into and open sub menus with the ArrowRight key
  • move back to a parent menu and close the sub menu with the ArrowLeft key or Escape key
  • close current menu with Escape key
  • open menu with Windows menu key (optional, via prop)
  • trigger menu button action with Enter key (and then close entire menu)

I agree with most of these features. I'm not so sure about Escape key moving back up the menu tree, but we could try it and see how the UX feels.