Controlling Menu component state for indirect open/closing

[oscar8880]

Hey!

I've got a question about a somewhat unorthodox use of the Menu component.

Essentially in my use case I'm implementing a bunch of keyboard shortcuts to do common actions in the UI, one of which involves switching user activity. Our Activity component uses a Menu under the hood so we'd like the shortcut to open up that menu so the user can then carry on using the keyboard to navigate the activity options and select one.

The kicker is that I can't seem to get it all working nicely so that:

• clicking the original menu button opens and closes the menu
• indirectly opening and closing the menu (by controlling the Menu state) works
• focus behaviour works as expected in both scenarios

I've been playing around with and example in this sandbox: https://codesandbox.io/s/sweet-water-mn5rlf?file=/src/index.tsx but can't seem to quite get everything to work at once.

Are there any suggestions for how else to achieve that functionality, or controlling the state of Menu generally?

Thanks!

[serifluous]

Hey @oscar8880 ! I'm still discussing with the team, but could you share a design/prototype of the experience you're trying to achieve in the product? The additional context of where this interaction happens within Twilio could help us give some better pointers.

Feel free to drop it in #help-design-system on slack if you don't want to share it here.

[oscar8880]

Hey @serifluous, thanks! I've messaged on the Slack channel so I can share the specific internal code and example more freely.

[gloriliale]

Hello @oscar8880! Thanks for sending us your examples. We're discussing it right now and will have something for you by the end of the day update: Tuesday- we're making sure our solution is fully accessible!

[gloriliale]

Hi @oscar8880! Thank you so much for your patience. We used your CodeSandbox as the basis for our own working example in this one!

Our Menu component is made through our Menu Primitive which repackages Reakit's menu, so their docs would be the best place to find details about controlling the menu state. We can use toggle within the menu state, for example, instead of creating a separate state for it opening and closing.

Two things to note about accessibility:

• We need to ensure that when the menu opens from the external trigger, like the button in this example, that the first item in the menu is focused, so that a user can then use the down arrow key to navigate through it. We're able to do this by leveraging the first prop in the menu state. More information on that is here in the Reakit docs (this one is a tad hidden- you have to scroll down and click on the "21 state props" part to see everything that's returned in its state).
• To make this super efficient for keyboard users, it would ideally bring their focus back to the element they were at previously before opening the menu, so they could continue their previous task. In this example, we made that happen through refs.

Let us know if that's helpful!

[hjbrown11]

Hey, thanks so much for looking into this!

I've just gone in on the example you sent but I'm noticing a couple of issues that myself and Oscar were encountering too. For example, when you open the menu indirectly using the 'Press me to open the menu indirectly' button, then click the primary 'Menu - open me' button, rather than closing the menu, the menu will open again. It seems to be not maintaining the state of the menu accurately when these methods are used in conjunction.

Thanks!
Hannah

[gloriliale]

Hi @hjbrown11!

I see the behavior you're referring to. From what we can gather, the likely culprit would be a bug in Reakit, since all other combos of closing/opening work as expected.

For the implementation you originally were talking about, where the trigger is a keyboard shortcut, it seems like this would be an edge case, since most people would be opening and closing the menu using the same method (clicking or keyboard stroke).