0

I am trying to set up a Menu with blueprint.js' Popover, Menu and MenuItem classes.

I've so far tried it the controlled and uncontrolled way but both ways I just run into a dead end.

Controlled Menu: I tried setting up hotkeys for the navigation so that I could navigate the menu with arrow keys. That works until I want to open a submenu. Submenus are triggered on hover which I cannot simulate with js as far as I know.

"Uncontrolled" Menu: Only setting the tabindexes for each popover and menu I managed to be able to tab trough the popover-buttons. On enter the button will trigger a click and open the menu. But now the focus is gone. I would have to tab through all of the browsers buttons until I finally get back to the Menu to tab through the Menu Items. But from that point I can't go back to tabbing through the popovers.

If anyone managed to use blueprint.js Menus with keyboard controls I would be glad if he or she could give me a hint on how to do that.

Enie
  • 649
  • 5
  • 18

1 Answers1

0

Looking at blueprint 3.7, it doesn't look like what you want is natively possible. Submenus are just menuitems that are children of another menuitem and rendered as the content of a Popover whose props are not configurable.

You could however try something like dispatchEvent to force a hover event on some desired menu item.

Michael Wu
  • 1,177
  • 1
  • 13
  • 34