search

radix-ui / primitives

Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
https://radix-ui.com/primitives
MIT License
15.61k stars 800 forks source link

[Bug]. Dialog and Popover conflict #3142

Open xkomiks opened 2 weeks ago

xkomiks commented 2 weeks ago

Bug report

Current Behavior

  1. Open CodeSandbox.
  2. Click the Dialog button.
  3. The Dialog element will open.
  4. Inside the dialog, click the Popover.
  5. The Popover will open.
  6. Select any element from the Popover dropdown.
  7. The Popover and Dialog will close, but the Dialog.Overlay remains visible.

Expected behavior

When opening a popover over a modal window, the focus is moved to popover.

When clicking on Dialog.Content, the popover closes When clicking on Dialog.Overlay, the popover and dialog close

Reproducible example

https://codesandbox.io/p/sandbox/radix-ui-dialog-forked-mgrzrd?workspaceId=a4b71791-adc5-4752-b50f-7be66d4db979

Suggested solution

Additional context

Your environment

Software Name(s) Version
Radix Package(s)
React n/a
Browser
Assistive tech
Node n/a
npm/yarn
Operating System
jfbn commented 5 days ago

I'm trying to open a Drawer from a popover. I want to close the popover when I open the drawer. Doing so programatically, with a controlled open prop on the popover, will also close the drawer. Undesired behaviour.