[Bug] - Toast dismiss does close drawers [Not-Fixed]

[xeinebiu]

Description

As seen on the video below, when I dismiss a toast for the second time (first time it works as expected always, first time after page loaded), but then when I call dismiss it also closes the Drawer. Even If I do not use the CloseTrigger of Toast but call globalToast.dismiss(id);

https://github.com/user-attachments/assets/01cdfebe-7f7e-4541-9dfe-00db2c531595

Link to Reproduction (or Detailed Explanation)

provided example below

Steps to Reproduce

export const globalToast = Toast.createToaster({
  placement: 'bottom-end',
  overlap: true,
  gap: 16,
  duration: 60000,
});

export const GlobalToastProvider: FC = () => {
  return (
    <Toast.Toaster toaster={globalToast}>
      {(toast) => (
        <Toast.Root key={toast.id}>
          <Toast.Title>{toast.title}</Toast.Title>
          <Toast.Description>{toast.description}</Toast.Description>
          <Toast.CloseTrigger asChild>
            <IconButton size="sm" variant="link">
              <FontAwesomeIcon icon={faXmark} />
            </IconButton>
          </Toast.CloseTrigger>
        </Toast.Root>
      )}
    </Toast.Toaster>
  );
};

Consuming part

      globalToast.create({
        title: 'TITLE TEST',
        description: 'DESCRIPTION TEST',
        type: 'success',
      });

Ark UI Version

4.1.0

Framework

• [X] React
• [ ] Solid
• [ ] Vue

Browser

Chrome, Firefox

Additional Information

No response

[xeinebiu]

Figured out the issue.

        <Drawer.Root
          closeOnInteractOutside={false}  // <-- If this is "true" then closing a toast is registered as "interact outside" event
         ....
        >

Now the question might be, do we want to count interacting with a "toast" as outside part 🤔 and why only the second time it dismisses the drawer 🤔

[cschroeter]

Thank you for reporting this issue. To help us investigate, please provide a minimal reproduction of the problem. You can use one of the following templates as a starting point:

• React: StackBlitz React Template
• Solid: StackBlitz Solid Template
• Vue: StackBlitz Vue Template

We’ll close this issue for now, but feel free to reopen it once a reproduction is available.

[xeinebiu]

@cschroeter

Thanks for helping with this. I've attached the sample project below. Just run npm i && npm start.

The code isn't very organized, but you can find it in apps/portal -> main.tsx. In main.tsx, you'll see the globalToaster and the modal.

drawer_issue_xeinebiu.zip

https://github.com/user-attachments/assets/1d6c20cb-6684-478a-9056-8ec3ff7945c6

@cschroeter we cannot re-open issues as we do not have the neccesary permission for it, I have attached the requested sample above & you can reopen it now.