Menu demo should show pop up behavior

[jmagaram]

I'm evaluating Shoelace for a new project. It looks pretty good from the demo pages. But I'd really like to see a functioning Menu component. The demo only shows the menu content/display, not how it works. Specifically I want to see how well it supports keyboard navigation to open, browse, and select an item. Could you update the demo page to show one in action, perhaps triggered by a button?

[claviska]

Menus have many uses, one of which is a dropdown. Have you seen the dropdown component, which is typically composed with menus? https://shoelace.style/components/dropdown

[jmagaram]

Thanks very helpful. Ok so I tried the dropdown and there are problems with keyboard support. If you click on it with the mouse and then do up/down arrows, it scrolls the page and changes the selection without proper highlighting. But if you tab to it - causing it to get focus - the keyboard keys work as expected. I think clicking on a dropdown should automatically give it focus. Also I'm not sure Esc ever does the expected thing of closing the menu.

https://react.fluentui.dev/?path=/docs/components-button-menubutton--default
https://component.kitchen/elix/DropdownList

[jmagaram]

I think it works better on Chrome. Safari on macOS is showing the problem.

[claviska]

Safari doesn't set focus to buttons when you click on them like other browsers. This is true for all buttons, not just Shoelace buttons. I'm reluctant to "fix" this because Safari users probably won't expect it.

At the same time, an open dropdown (as a result of clicking on a button) does feel misleading. Maybe the dropdown's key handlers can be updated to listen to the document instead of the trigger (button) when it's opened.

Thanks for pointing this out. I'll look into it soon!

[jmagaram]

I filed a bug: #1177

I don't understand the technical issues but am pretty sure the current behavior will seem broken/unexpected to Safari users. Certainly the up/down behavior is totally weird. I don't know if this is related but I configured my Mac to support keyboard navigation in forms so tab moves between controls. I can't believe this is a Mac option that has to be manually turned on but it does.

[claviska]

#1177 has been resolved. Thanks for the report!