[material-ui][Switch] Not focusing as the next element in tab index

[berenicestr]

The switch component doesn’t focus as the next element in tab index.
I have tried with the tabIndex and autoFocus props and doesn’t solve it. I use the lastest version of dependencies.

Code: https://stackblitz.com/edit/react-ujnl8h?file=Demo.tsx

Originally posted by @berenicestr in #37753 (comment)

Search keywords:

[DiegoAndai]

Hey @berenicestr, thanks for the report

I cannot access the code sandbox; apparently, it is not public. May I ask you to update it? Maybe you find it easier to use Stackblitz, as codesandbox recently restricted their usage limits

[berenicestr]

Sorry Diego. I share an example in Stackblitz:
It’s a simple Switch component between two TextFields with TabIndex props.

https://stackblitz.com/edit/react-ujnl8h?file=Demo.tsx
Thanks in advance!

[DiegoAndai]

Thanks for the example! I don't understand what's the bug though, I can tab through the switch component correctly:

Screen.Recording.2024-02-09.at.14.21.06.mov

[berenicestr]

Thank you so much for you response! I see your video it’s the functionality OK!

I have tested with bowsers: IE - OK, Firefox, OK, Chrome OK.
Safari (17.3v - latest), and others such DuckDuckGo (Version 1.68.0) - KO, The Switch doesn’t focus when I keypress Tab. It jumps Text1 to Text2.

¿So, is perhaps a bug of this browsers?

Thanks in advance for your support!

[DiegoAndai]

I can confirm a weird behavior in Safari, thanks!

Screen.Recording.2024-02-09.at.16.54.17.mov

I am accepting as a bug. I think this should be solved when refactoring the component to build it on top of Base UI, so I'm adding it to that milestone as well.

[berenicestr]

Excellent! Thank you so much!