sl-dropdown support for ESC and UP/DOWN broken in safari macOS

[jmagaram]

Describe the bug

On Safari on macOS there are two serious keyboard issues with the dropdown

1. After opening it by clicking with mouse or trackpad, typing esc should cause the dropdown to close but is ignored.
2. After opening it by clicking with mouse or trackpad, the up/down arrow keys cause the whole page to scroll and the selected item to change.

The expected behavior is what you see if you press tab to move the focus to a dropdown and then try the actions above. I'm pretty sure you get the correct behavior in Edge, Chrome, and Firefox.

To Reproduce

Go to dropdown demo, click with mouse or trackpad to open a dropdown, and try to use keyboard to navigate up/down or press esc to close.

Browser / OS

• OS: macOS
• Browser: Safari
• Browser version: latest as of 2/3/2022 on Ventura, m1 MacBook Pro

[jmagaram]

I think the dropdown control should behave like the native menus on macOS. Open any macOS app, click a menu item from the top of the screen, and then you can do up/down and esc as expected. Esc usually causes popups to dismiss.

Once a user clicks on a dropdown button, it seems totally intuitive to move the focus there. The user chose to click on something so clearly that is their focus.

I'm noticing now on GitHub that this dropdown combo works as expected in Safari.

What is difference between a dropdown and a select?

For a reference I disagree with, go to apple.com and click the bag/cart icon at the top right on the nav bar. It pops up a bunch of options. Pressing esc causes the dropdown to close, though up/down does the weird thing of scrolling the whole page. This is like a menu, not a select control.

See https://www.apple.com/iphone/compare/?modelList=iphone-14-pro,iphone-14-pro-max,iphone-14-plus. These dropdowns respond to both esc and up and down as expected.

I think https://shoelace.style/components/select works as expected.

[jmagaram]

Other reference implementations:

https://component.kitchen/elix/DropdownList
https://component.kitchen/elix/Menu
https://developer.salesforce.com/docs/component-library/bundle/lightning-button-menu/example

[jmagaram]

Google docs dropdown behaves as I expect...

macOS calendar create event is dismissed on esc...

Apple Maps button does esc and up/down...

I think native app behavior is what we want to emulate, not web html UI UNLESS you're trying to emulate a built-in HTML component. HTML doesn't have a popup menu.

[claviska]

After opening it by clicking with mouse or trackpad, typing esc should cause the dropdown to close but is ignored.

This has been fixed in 12f6207.

After opening it by clicking with mouse or trackpad, the up/down arrow keys cause the whole page to scroll and the selected item to change.

This has been fixed in cedcd65. To make this work, I'm forcing focus on the trigger after it gets clicked. All browsers except Safari do this by default, so I don't expect any adverse effects from this. I did have to replace the :focus-visible selector with :focus in dropdown's styles, because Safari's heuristics don't seem as good as Chrome and Firefox. In some cases, despite using the keyboard and focus occuring on the menu item, the focus styles just weren't showing.

[jmagaram]

Wow awesome! I've been trying to get Shoelace to work in Solid. Had lots of trouble - I'm not an experienced web dev. See #1207 - hoping you/someone can take this over and add to your getting started docs. Also noticed something weird with menu - I'm trying to use it as a select that is always open and not in a popup, like a long list box you can put graphics and stuff in. Click on it once and the item doesn't turn blue until you move the mouse/cursor away; disconcerting not getting feedback.