Skip to content

[bug]: Aria warning when clicking a Select twice inside a Dialog #8707

@alexmahan

Description

@alexmahan

Describe the bug

When using a <Select> component inside a <Dialog>, clicking the <Select> a second time (or any other Select) triggers a console warning about aria-hidden:

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.

Affected component/components

Select, possibly Dialog

How to reproduce

  1. Add a Select element inside a Dialog
  2. Open the Dialog
  3. Click a Select, and close the Select
  4. Click the Select component again
  5. See the warning in the console

Codesandbox/StackBlitz link

No response

Logs

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. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.
Element with focus: <button.flex items-center border-input px-3 py-2 ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 cursor-pointer text-pro-gray-400 h-[44px] relative border w-full text-left text-md font-normal h-[54px]! px-[14px]! py-[10px]! rounded-lg justify-between bg-pro-white hover:opacity-100 focus-visible:border-pro-blue-300 focus-visible:ring-offset-0 !focus-visible:ring-legacy-blue-25 focus-visible:ring-2#provider-search-filter-10>
Ancestor with aria-hidden: <div.fixed z-50 p-5 grid w-full gap-4 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 rounded-xl bg-white left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 max-w-lg border-1#radix-?r2f?>

System Info

Chrome 142, Mac OS 14.6.1

Before submitting

  • I've made research efforts and searched the documentation
  • I've searched for existing issues

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions