search

davidtheclark / react-aria-menubutton

A fully accessible, easily themeable, React-powered menu button
https://davidtheclark.github.io/react-aria-menubutton/demo
MIT License
455 stars 78 forks source link

Spacebar bug in Firefox #107

Open vutran opened 5 years ago

vutran commented 5 years ago

In the demo, there seems to be a bug when using spacebar to trigger the menu.

Steps to reproduce:

  1. tab to focus the menu trigger "Select a word"
  2. spacebar to open menu
  3. while the menu is opened and focused, spacebar to close.

Expected result: menu closes

Actual result: menu closes and opens in succession.

Tested on:

Other Notes

If you change the Button.tag to span, this works correctly. However, it should be expected that this should work with button. An old issue (#76) stated that the tag is exposed only for stylistic changes. However, with this bug, it becomes invalid due to this browser quirk.

malcalevak commented 5 years ago

This is addressed in the conversation on #108, but I think it warrants being mentioned here.

What your describing isn't a "browser quirk", it's expected native button behavior that hadn't been accounted for (so it's still a bug).

One of the benefits of using native buttons (but not role="button") is that they trigger click events on enter and space. Of course, this is problematic when you've written code to broadly support tags that aren't native button elements to behave as if they were.