Bug Report: Intermittent console error when opening Dialog

[IrinaSer]

Description:

An intermittent bug has been found in the Dialog component. After opening a modal window, an error occasionally appears in the console. The issue is unstable but reproducible both in a real project and in a minimal sandbox example.

❌ Error: Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus.

It seems that the error is related to aria-hidden attributes being assigned before the focus shifts away from the button that triggers the Dialog.

Steps to Reproduce:

1. Create a minimal example using the Dialog component from HeadlessUI.
2. Set up a button to open the modal window.
3. Click the button to open the modal.
4. Observe the console; the error sometimes appears.

Environment:

• HeadlessUI: @headlessui/vue: "1.7.22"
• Vue: "3.5.12"
• Browsers: Chrome
• OS: Windows/MacOS

Expected Behavior:

The modal window opens without errors in the console. The focus is correctly transferred to the first interactive element inside the Dialog.

Actual Behavior:

An error occasionally appears in the console, seemingly due to improper focus handling.

Additional Information:

• The issue occurs with minimal component configuration and logic.
• The bug is likely related to HeadlessUI attempting to assign focus attributes before fully switching the context.
• In real projects, this also leads to unstable UI behavior.

Screenshots:

1 Sandbox error:

2 Project error:

Sandbox Example:

https://codesandbox.io/p/devbox/pedantic-glade-8kth6p

[SampsonCrowley]

This is caused by use-inert always setting aria-hidden I think it should not. or should explicitly call blur first before then setting focus within the dialog

[NaMax66]

@SampsonCrowley have you tested it yet? Does this need to be changed in the library or can it be solved at the level of a specific application

[SampsonCrowley]

@NaMax66 tested what? Nobody has proposed a workaround. Use-inert is internal, the application can't just make the headlessui code not call the functions embedded in the code.

I merely pointed out where in the library it's coming from

[swalok47716]

If you log the activeElement in getActiveElement(), you’ll see it keeps logging the “Open dialog” button, so you’ll end up focusing on an element outside the dialog after the focus trap has kicked in.

My suggestion, as shown in the Headless UI docs, is to use a ref and the ref prop to focus the “Got it, thanks!” button (assuming that’s the one you want to focus).