Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: prevent Radix Dialog and Vaul Drawer dismissal when closing a toast #1725

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

unrenamed
Copy link
Contributor

@unrenamed unrenamed commented Nov 17, 2024

What does this PR do?

Fixes #1654 by ensuring that clicking inside a Sonner Toast does not trigger the closure of Radix Dialog and Vaul Drawer components.

Root Cause

When using the Dub app, clicking within a toast notification was being interpreted as an "outside click" for Radix Dialog and Vaul Drawer components. Since all of these elements are rendered in the same HTML portal layer, the default behavior is to close dialogs and drawers on outside clicks.

Fix

To prevent dialogs and drawers from closing due to clicks inside a toast notification, this update adds a check to detect clicks within elements marked with data-sonner-toast. When a click is detected in such an element, the default dismiss action is prevented, allowing dialogs and drawers to remain open.

How to test?

  1. Log in to the application.
  2. Go to the links list and select a link to edit.
  3. In the "Edit" modal, click on the "Tag" input field.
  4. Enter a new tag name and click "Create"
  5. When the toast notification appears in the bottom-right corner, close it.
  6. Confirm that the "Edit" modal remains open.
  7. Repeat on mobile and confirm the same behavior.
  8. Test this behavior with other modals and popovers to ensure they also remain open when closing toasts.

Copy link

vercel bot commented Nov 17, 2024

@unrenamed is attempting to deploy a commit to the Dub Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Closing the toast message after creating a tag closes the edit modal
1 participant