unmount="false" breaks tabindex="-1"

[mitar]

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

v1.7.7

What browser are you using?

Chrome.

Reproduction URL

https://stackblitz.com/edit/vue3-tailwind-zazhzk?file=package.json,src%2Fcomponents%2FHelloWorld.vue

Observe that:

• Without :unmount="false", after selecting a tab and pressing tab, you go to one of the posts with the focus directly.
• With :unmount="false", focus first moves to the whole panel.
• Without tabindex="-1" focus also first moves to the whole panel.

Describe your issue

I can set tabindex="-1" on TabPanel elements to disable tabbing into the panel (see #1433). But if I also set :unmount="false" (see #740) then tabindex is re-set to 0 when switching between panels, re-enabling tabbing into the panel. Ideally, this would not happen, if tabindex is set to -1 explicitly.

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

Wrote a bit more about the problem and the potential solutions in the PR itself (#2214), but we now allow to set the tabIndex on the Tab.Panel itself to opt-out of the default behaviour.

---

This should be fixed by #2214, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.
• npm install @headlessui/vue@insiders.