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
14.82k stars 717 forks source link

Dialog component closing unexpectedly #2960

Closed yumadilovtimur closed 1 week ago

yumadilovtimur commented 2 weeks ago

How to reproduce: Open two Dialogs one after another. (from example: https://www.radix-ui.com/primitives/docs/components/dialog#scrollable-overlay) In Chrome DevTools, select mobile device to simulate touch events instead of mouse events. Click on the close modal window button. (cross) Both modal windows close, the first modal window triggers onPointerDownOutside. At the same time, everything works correctly when clicking with the mouse (click event).

"@radix-ui/react-dialog": "1.0.5"

Expected behaviour: Only the second modal window is closed.

vladmoroz commented 1 week ago

I did a quick test and can't reproduce this. Can you create a reproduction on CodeSandbox or a similar service?

yumadilovtimur commented 1 week ago

I apologise. The problem seems to be a bit different. I have implemented synchronisation of open modals with query parameter: ?modals=one,two,three. If I open the first modal, (?modals=one) then open the second, (?modals=one,two) then close the first from the second, (via a custom method of closing by modal id. It turns out: ?modals=two) press "back" in the browser (to return to the state of ?modals=one,two), then the first modal is under the second, (I manually add the z-index) but radix perceives modal "one" as the last opened and any click on the content of modal "two" is perceived as onPointerDownOutside in modal "one". As a result, the modal window "one" is closed. Can you please advise me how I can solve this problem?

vladmoroz commented 1 week ago

I can't say more without digging into your app code, but sounds like this isn't a problem with Radix and is rather specific to how you manage state in your implementation