Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Multiple / Nested Popup tabIndex bug

See original GitHub issue

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.0.0 (latest?)

What browser are you using?

Chrome latest 64-bit 89.0.etc Windows 10

Reproduction repository

https://codesandbox.io/s/headlessui-dialog-multiple-modals-bugs-forked-534xd?file=/pages/index.js:171-187

Describe your issue

This may be related to #426 (nested Dialogs – Is it the same for nested Popovers?)

I seem to be seeing a tabIndex bug where nested popovers tab 2 items for focus, including with the new dev build. But maybe I’m missing something?

https://codesandbox.io/s/headlessui-dialog-multiple-modals-bugs-forked-534xd?file=/pages/index.js:171-187

Tab into the menu works:

But Tab skips the in-between item:

And Esc closes all the Popovers. Is that the intended effect or a similar bug to the nested dialogs bug?

Issue Analytics

State:
Created 2 years ago
Reactions:7
Comments:11

Top GitHub Comments

3reactions

RobinMalfaitcommented, May 12, 2022

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

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

You can already try it using:

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

2reactions

kloh-frcommented, Nov 16, 2021

I’m nesting popover elements for a mobile navigation with 2 level panels and I also identified this issue as I was doing some tabulation tests… This is quite strange and annoying. 🙁

I’m going to experiment a bit, even if I think I’m going to be limited pretty fast by my poor technical knowledge. 💩

Top Results From Across the Web

What are the accessibility issues with nested modal dialogs

There is no accessibility with nested modal dialogs per se. The problem is more often caused by the fact that the UI frameworks,...

Using tabindex - web.dev

If there are multiple elements with a tabindex greater than 0, the tab order starts from the lowest value that is greater than...

Creating Logical Tab Order with the Tabindex Attribute

The objective of this technique is to provide a logical tab order in cases where the default tab order is not sufficient to...

Managing Multiple Bootstrap Modals - Arroyo Labs

Unless your goal is to open a modal that is nested inside already open modal, you may see an occurrence as if the...

Tab components - React-Bootstrap

Dynamic tabbed interfaces should not contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that ......