search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.75k stars 32.24k forks source link

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

Open berenicestr opened 8 months ago

berenicestr commented 8 months ago

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 https://github.com/mui/material-ui/issues/37753#issuecomment-1917139944

Search keywords:

DiegoAndai commented 8 months ago

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 commented 8 months ago

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 commented 8 months ago

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

https://github.com/mui/material-ui/assets/16889233/bf536829-f73c-43d4-9438-4ec00953317d

berenicestr commented 8 months ago

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 commented 8 months ago

I can confirm a weird behavior in Safari, thanks!

https://github.com/mui/material-ui/assets/16889233/8ba4c319-d08a-4dc4-be50-813b0ca5cda0

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 commented 8 months ago

Excellent! Thank you so much!