Reach-ui: [MenuButton] Focus conflict with multiple MenuButtons

[loicplaire]

🐛 Bug report

Current Behavior

MenuButton doesn't work as expected when you have more than one rendered on the page.
If the first one is opened, clicking on the second one, doesn't open it (doesn't render the MenuList). You have to click again for it to open.

I believe this is known issue as currently have a TODO comment in the code:

https://github.com/reach/reach-ui/blob/master/packages/menu-button/src/index.tsx#L11

Expected behavior

When the first MenuButton is opened, upon clicking on the second MenuButton the first MenuButton should close (as it does now) and the second one should open (it doesn't at the moment).

Reproducible example

CodeSandbox Template

Suggested solution(s)

By looking at the source code, it seems that the first MenuButton is stealing the focus from the second one, hence the flashing effect reported in the TODO comment.

https://github.com/reach/reach-ui/blob/master/packages/menu-button/src/index.tsx#L956

Your environment

| Software | Name(s) | Version |
| ---------------- | ------- | ------- |
| Reach Package | @reach/menu-button | 0.8.2 |
| React | | |
| Browser | | |
| Assistive tech | | |
| Node | | |
| npm/yarn | | |
| Operating System | | |

[enforce-template-use[bot]]

Thank you for opening this issue

[lindsaythegroves]

I'm also experiencing the same issue as @loicplaire and noticed that when I used version 0.7.0, there was no issue but it looks like 0.7.1 was where the potential bug was introduced. Here's my sandbox with two menus working at 0.7.0 and if you change the version of menu-button to 0.7.1, you'll see the same issue described by Loic: https://codesandbox.io/s/two-menus-reach-ui-5n2hk

Thanks!

[chaance]

Please check this in the latest version. Should be fixed. https://codesandbox.io/s/two-menus-reach-ui-6mmur