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

[bjerkins]

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.

select.mov

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

Browser / OS

• OS: iOS
• Browser: Safari
• Browser version: 17.5.1

Thanks !

[KonnorRogers]

🤔 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.