Skip to content

why Dropdown > Dialog behavior different in React and Next #3495

@flex-hyuntae

Description

@flex-hyuntae

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

  1. Dropdown content open
  2. Click Dropdown.Item
  3. Open Dialog
  4. focus move into dialog
    but when i use this component in Next
  5. Dropdown content open
  6. Click Dropdown.Item
  7. Open Dialog
  8. 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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions