[menu-button] Menu in dialog can be opened only after the second click with React v17

[akirilchik]

🐛 Bug report

Hi guys, please take a look. Thanks in advance.

Menu in dialog can be opened only after the second click with React v17.

Current Behavior

Menu in dialog can be opened only after the second click with React v17.

Screen.Recording.2021-06-11.at.15.39.03.mov

Expected behavior

Menu in dialog should be opened after the first click.

Reproducible example

CodeSandbox Template

Your environment

Software	Name(s)	Version
Reach Package		latest
React		latest (17)
Browser	Chrome	latest
Assistive tech
Node
npm/yarn
Operating System	MacOs Big Sur	11.4

[akirilchik]

Any news?

[chaance]

I haven't had a chance to look into this yet, but it's on my list for the next release.

[chaance]

Looks like it's fighting with react-focus-lock a bit, triggering a blur event that immediately reverts the menu button's state after the initial click. I'll need to investigate this further in the dependency.

[austsinovich]

How is this investigation? Any updates?

[chaance]

Found the problem, haven't had time to implement/test the solution. Menu popovers are portaled, so when they receive focus the focus-lock kicks in and immediately steals it back, which triggers the menu popover blur event and closes it before you ever see anything.

react-focus-lock has a few techniques for handling portaled elements. If this is a priority for you, I'd happily take a PR if you have time to go down this rabbit hole before I do! https://github.com/theKashey/react-focus-lock#portals

[chaance]

Alright, so I spent some more time on this tonight and here's the deal.

With react-focus-lock there are features that make handling focus with nested portaled elements possible, but it would be quite tricky for us to integrate in a way that "just works" by default. This would require some additional work to come up with the right API, and frankly I just don't have enough time to dedicate to new features/APIs at the moment. Hopefully that changes in the future, but here we are 😄

That said, here's my response + a solution:

• We can't currently support portaled popovers inside of dialog without major changes
• To nest MenuButton inside of dialog and prevent the double-click issue:
  • Set portal prop to false on either MenuList or MenuItems depending on the API you're using
  • Wrap Menu in a relative-positioned DOM element so that the popover is positioned correctly relative to the button

I've made changes for the next release that will allow Menu to accept an as prop to make the second step a little easier, but you can wrap it in your own DOM element just as well. I added an example inside-dialog.example.tsx that shows this working on the current dev branch, and I'll update the docs to make this our official solution.

[danielstreit]

I'm hitting this too. Just to connect the dots a bit, I believe the underlying issue is explored here in react-focus-lock.