[bug]: Cannot interact with Sonner toasts opened from Dialogs (or other modal elements)

[arvinpoddar]

Describe the bug

If you create a sonner from within any modalic element (dialog, context menu, dropdown, popover), any interaction with the resulting sonner toast will result in the modal element closing as well.

This issue was previously described in https://github.com/shadcn-ui/ui/issues/2401. However, increasing the z-index of the sonner group does not resolve the issue, and registering custom onInteractOutside handlers for every modalic component is an unwieldy option. Ideally, one should be able to interact with the sonners while a dialog is open without closing the dialog.

Affected component/components

Sonner

How to reproduce

1. Create a dialog
2. Use a button in the dialog to create a sonner toast. Alternatively, enable the close button for the toast.
3. Attempt to highlight text in the toast, or click the close button. The dialog will also close.

Codesandbox/StackBlitz link

https://codesandbox.io/p/devbox/shadcn-playground-forked-kxc7l8?file=/src/App.js:34,45&workspaceId=b7d16bab-058a-4b6f-b4f8-cb3182273009

Logs

No response

System Info

MacOS 14.4.1 (23E224), Arc Version 1.37.0

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[Faisal-imtiyaz123]

I want to work on this

[giveerr]

when a dialog opens

pointer-events: none; is added to body and pointer-events: auto; is added to dialog

As a workaround I added pointer-events: auto; to the toaster

[Faisal-imtiyaz123]

@giveerr I was trying to figure out how does the state management occurs under the hood. How did u figure it out. Plz share.

[giveerr]

@Faisal-imtiyaz123

this is a radix UI behavior

-> shadcn -> radix Dialog -> radix DismissableLayer

[arvinpoddar]

when a dialog opens

pointer-events: none; is added to body and pointer-events: auto; is added to dialog

As a workaround I added pointer-events: auto; to the toaster

This still doesn't prevent the dialog from closing when the toast is interacted with, right?

[giveerr]

when a dialog opens pointer-events: none; is added to body and pointer-events: auto; is added to dialog As a workaround I added pointer-events: auto; to the toaster

This still doesn't prevent the dialog from closing when the toast is interacted with, right?

NOTE THAT THIS IS A WORKAROUND I AM CURRENTLY USING

The solution I found is this, there is already a discussion here about this

const handleClickOutside = useCallback((e: CustomEvent<{originalEvent: PointerEvent | FocusEvent }>) => {
      const targetNode = document.querySelector('.toaster')

      if (e.target && targetNode && targetNode?.contains(e.target as HTMLElement)) {
        e.preventDefault()
      }
}, [])

and add this to DialogContent

        onPointerDownOutside={handleClickOutside}
        onInteractOutside={handleClickOutside}

[Faisal-imtiyaz123]

@giveerr the code u have given links to pertain to radix-ui source code. How do I incorporate it in shadCn.

[jessicacastro]

I'm also having trouble to interact with Dropdown Menu button after open a Sonner Toast. It's like the button changes the clickable space after Sonner Toast appeared in top right position. I can click and close the toast without close the dialog, but my Dialog Trigger after this has much less space to click, like, i can only click if in the top right corner of the button used as Trigger.

[swiftpaca]

Any updates on this bug fix?