Trying to remove focus from Switch component

[barbararcbf12]

What package within Headless UI are you using?
@headlessui/react

What version of that package are you using?
^2.1.2

What browser are you using?
Chrome

Reproduction URL

Describe your issue
I have a menu that is closed (hidden) at first, and it opens if clicked or the "Enter" key is pressed.
I am in a situation where I have a Switch component located in the menu I mentioned above. So, I would like to remove the focus from the Switch element when the menu is closed, but I am stumbling upon the fact that I cannot assign "-1" to the tabIndex prop.
Would it be possible to change it so I can disable focus to the Switch component?

headlessui/packages/@headlessui-react/src/components/switch/switch.tsx

Line 227 in 49c081d

tabIndex: props.tabIndex === -1 ? 0 : props.tabIndex ?? 0,

[RobinMalfait]

Hey!

Are you talking about a Headless UI <Menu />? If so, then you cannot use elements such as a <Switch /> inside of it.

That said, even if we allowed passing -1 to the tabIndex, then it will still have focus. The -1 on an element makes it programmatically focusable (but not keyboard focusable). If you truly want the remove the focus from the <Switch /> then there are 2 options I can see:

1. (Manually) move focus to another element instead.
2. Provide the disabled prop to the <Switch disabled /> which indicates that you can't interact with the Switch while disabled (which also removes focus).

Hope this helps!