Menus open on form submit

[jamess-ais]

Current Behavior

While using the use:menu system in a form I noticed that if I clicked enter in the input it would open the menu also in the form.

Steps To Reproduce

1. Create a form with an input and a menu in it
2. Input type is type="search"
3. Click enter in the input and it should do on:submit. It should also open the menu (but I assume it shouldn't)

Anything else?

A hacky work around is the following on the input;
on:keydown={key => {if(key.key === "Enter") {key.preventDefault(); onSubmit();}}}

When the Enter key is pressed in the input it'll prevent default which creates some on submit event which the use:menu is triggered by (I assume). We then call whatever function you would've defined in the form's on:submit

[endigo9740]

Hey @jamess-ais I've now had a moment to understand the issue here. This is actually working as intended. The ARIA APG sets the guidelines for what keyboard shortcuts should be implemented per each element. See the following for menus.

NOTE: we link to this at the top of the Menus doc for future reference.

https://www.w3.org/WAI/ARIA/apg/patterns/menu/

By changing or removing this behavior we would actually be damaging accessibility for this feature. For now I'd say your work around is probably the best solution if you wish to keep things setup as is.

Alternatively, a better solution might be to avoid using Menu + Inputs in this manner. Note we do have an Auto-complete feature in the works that may be a proper replacement for you soon, but this is not yet available.

• New Component: Autocomplete #377

As a temporary solution, you can also look into the native browser solution using datalists. It's not as uniform in style across browsers, but might get you by for now:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist