-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Open
Description
Question
I have question
I try make component like this
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild>
<button>Dropdown Menu</button>
</DropdownMenu.Trigger>
<DropdownMenu.Portal>
<DropdownMenu.Content>
<Dialog.Root>
<Dialog.Trigger asChild>
<DropdownMenu.Item
danger
onSelect={e => e.preventDefault()}
>
Delete
</DropdownMenu.Item>
</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Content>
<Dialog.Title>{deleteTitle}</Dialog.Title>
<Dialog. Close>
Cancel
</Dialog. Close>
<Dialog.Close>
Confirm
</Dialog.Close>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
</DropdownMenu.Content>
</DropdownMenu.Portal>
</DropdownMenu>
when i use this component in React working very well
- Dropdown content open
- Click Dropdown.Item
- Open Dialog
- focus move into dialog
but when i use this component in Next - Dropdown content open
- Click Dropdown.Item
- Open Dialog
- focus remain Dropdown.Item
And browser said this 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. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.
Element with focus: <div.c-kPqtHT c-hfnGno c-PJLV#radix-:R4mH1:>
Ancestor with aria-hidden: <div>
Do you have idea? why React and Next different behavior at same code
Metadata
Metadata
Assignees
Labels
No labels