[menu-button] Cannot immediately click menu item in tests - 0.16.0 regression

🐛 Bug report

Current Behavior

After updating @reach/menu-button to 0.16.1 in my app, a few tests started to fail. The menus still seem to work okay in manual testing, but I think it’s because the tests are running faster than a human can click things.

I’ve found that I need to make two clicks to a menu item for it to take effect, or add about a half-second delay after opening the menu before clicking the item.

Expected behavior

Menu items should be possible to click as soon as the menu opens.

Reproducible example

https://codesandbox.io/s/reach-menu-button-0-16-cant-click-menuitem-in-test-v93z3?file=/src/__tests__/App.test.js

Note that the test fails, but uncommenting out the delay or the second click should cause the test to pass. If not, try refreshing the browser window, I’ve found that codesandbox tests can be kind of flakey.

Also, if you change the version of @reach/menu-button to 0.15.3, and reload the page, the test should start to pass without the delay or double-click.

Suggested solution(s)

I think maybe something changed so that the menu items aren’t ready for clicks right away?

Additional context

Your environment

Software	Name(s)	Version
Reach Package	menu-button	0.16.0
React		17.0.3
Browser	n/a
Assistive tech	n/a
Node	n/a
npm/yarn	npm
Operating System	mac

[IanVS]

@chaance is this indeed working as intended? I think it’s pretty confusing behavior when writing tests, and it took me a while just to figure out why my tests were failing. It seems that this could be mentioned in the changelog, or even the docs site, as a testing tip until/unless some kind of heuristics can be used to determine whether or not the component is running in a testing environment.

[stephenwade]

Seems to be intentional behavior. It was changed in https://github.com/reach/reach-ui/commit/4e7fc922307ccf24f76b5b54d75af8d046fd29da.

For more information, see the discussion in https://github.com/reach/reach-ui/issues/563.