material-components / material-web

Material Design Web Components
https://material-web.dev
Apache License 2.0
8.95k stars 843 forks source link

md-menu-item of type="button" should click on keyboard selection #5577

Open austinw-fineart opened 3 months ago

austinw-fineart commented 3 months ago

Description

In the same way that a click is triggered for anchors on keyboard selection, I would expect the same to apply for buttons as well. However that is not the case. Instead, you have to handle the close-menu event manually to produce the same effect.

Compare between using mouse and keyboard to select from two kinds of menu: Example Playground

Also notice how anchors only get clicked on Enter but not Space which matches their native behavior but not so much the menu spec. The inconsistency irks me a bit but meh. As an aside, I feel like handling selection from a menu is the most essential part of using it so there should be an easier way to go about all this.

asyncLiz commented 2 months ago

I think the culprit is the menu item controller's keydown handler, which stops the space/enter keydowns from making a click.

@e111077 may know a bit more about that controller, but that'd be a good place to start debugging.

e111077 commented 2 months ago

The initial reasoning is that a click will cause the menu to close / open submenu via click selection. This would then likely trigger the close twice and cause some visual jank.

Additionally, by marking it as defaultPrevented == true, we prevent the menu's typeahead functionality from triggering on "space" as the first button pressed.

We might be able to add some likely non-trivial logic / rewrite here to solve this. Perhaps another marker other that preventDefault, but that may degrade the DX of "just call preventDefault on any event to opt out of menu events"