search

shoelace-style / shoelace

A collection of professionally designed, every day UI components built on Web standards. SHOELACE IS BECOMING WEB AWESOME 👇👇👇
https://webawesome.com
MIT License
12.93k stars 825 forks source link

Select: Form-control navigation on iOS jumps over sl-select #2144

Open bjerkins opened 2 months ago

bjerkins commented 2 months ago

Hey guys. First of all, thanks for an awesome library.

Describe the bug

On iOS , there's this feature where you can easily jump between form controls with the up-down arrows above the keyboard. The jumping also takes place when you use autofill on a field.

It seems that the sl-select component does not get recognized as one of the fields the browser can jump to, so it simply skips over it. See video in the section below.

With a native select, the browser jumps to the select field and opens it, which is quite user friendly.

Any thoughts on this ? Perhaps this won't be possible with the current approach of having the native inputs residing in the shadow dom?

To Reproduce

I screen recorded the behavior so it's easy to see.

https://github.com/user-attachments/assets/ab88ef30-6e84-4671-9c7f-027b949ac3a4

Notice that I'm tapping the up and down arrows to jump between the input fields.

Browser / OS

Thanks !

KonnorRogers commented 2 months ago

🤔 Interesting. Probably has to do with the <input> in the shadow dom being readonly. Thanks for the report. I wonder if we set it to readonly on focus if itd be an easy way to circumvent this. I'll do some testing.