Dropdown - Focus/Highlight not visible for sl-menu-items in Safari Browser

[dinesh1101]

Describe the bug

Focus/Highlight is not visible in safari for sl-menu-items when pressing down araow after opening the dropdown using click.
But in Chrome browser we can get highlight/focus when we follow the reproducible steps.

To Reproduce

Steps to reproduce the behavior:

1. Go to sl-dropdown component in safari browser
2. Click on dropdown to get open
3. Press down arrow key to have highlight/focus
4. No highlight/focus happens.

Screenshots

If applicable, add screenshots to help explain the bug.

Browser / OS

• OS: [Mac]
• Browser: [Safari]
• Browser version: [17.5]

Additional information

When interaction happens with keyboard, safari brings the highlight.

1. Press TAB to get focus for sl-dropdown
2. Press Enter to open dropdown.
3. Now Press down arrow key to get highlight/focus.
4. It will get focus

This highlight/focus will not happen when we open dropdown via click, and then pressing down arrow key.

[CetinSert]

1. Open https://shoelace.style/components/menu#in-dropdowns
2. Click on Edit ▾
3. Press ↓
4. No focus outline

---

[CetinSert]

<sl-menu>s on RTCode.io do not exhibit the same issue 🤔:

[KonnorRogers]

deep long sigh

So this is apparently a fun thing Safari does with :focus-visible.

So apparently if you do element.focus() on "pointerdown", Safari will trigger :focus-visible on a button.

element.focus() in a "click" event, Safari will NOT trigger :focus-visible.

https://blogs.igalia.com/mrego/2021/01/

@CetinSert Yours works because of your pointerenter event.

Here's a rough reproduction of Cetin's:

https://codepen.io/paramagicdev/pen/PorEdgW?editors=1000

Even weirder, you can trigger :focus-visible on your currently focused menu item by hitting right / left arrow keys.

And heres a codepen of the fix:

https://codepen.io/paramagicdev/pen/LYKeJRq

@claviska I think maybe to have consistent behavior, we always call .focus() on pointerdown in sl-button to make it consistent across browsers?