Dialog closing when dismissing a toast message

[dd-jonas]

Hey, I was wondering what the best way is to prevent the dialog closing when clicking a toast message.
Since the toasts appear on top of the dialog container, it doesn't make much sense that clicking it triggers the onClose of the dialog. Ideally I only want the dialog to trigger a 'click outside' event when clicking the overlay. Is there a way to achieve this?

Maybe relevant: I'm using React Toastify for the toast messages. This renders a container next to my app inside the root container, which is before the Headless UI container in the DOM order.

[andrepichardo]

Hi! You can use stopPropagation

Try adding the following onClick event to your Toast/Toaster component to prevent it from triggering the Dialog onClose handler:

onClick={(e) => {
    e.stopPropagation();
}}

Hope it helps! 👍

[Niwilai]

@andrepichardo I have the same problem as @dd-jonas, but your solution would not work for me. The Dialog closes nevertheless.

[SvetlioSS]

I had exactly the same issue. Calling stopPropagation doesn't work because sequence of events when clicking on the toast is:

1. onBlur of the Dialog.Panel
2. onClose of the Dialog
3. onClick of the toast

To make it work I did the following:

1. Set onClose of the Dialog to an empty function
   <Dialog onClose={() => {}} >

2. Added an onClick handler to one of the Dialog children to keep the "on overlay click auto close" functionality. In my case I have this wrapper div around Dialog.Panel.

3. Had to add a ref to make sure any children clicks don't close the dialog.

<div
    className={s['content-wrapper']}
    ref={ref}
    onClick={e => {
        if (ref.current === e.target) {
            onClose()
        }
    }}
>
    <Dialog.Panel ... >
        ...

[Niwilai]

@SvetlioSS appreciate your input on this issue. I don't have the chance to test this immediately but does the ESC for closing the modal still work with your method?

[SvetlioSS]

Unfortunately not :( will have to be re-implemented probably. I also updated my answer, had a bug...

[dd-jonas]

Same story for me, the order of events does not allow using stopPropagation. I guess it would make more sense that the Dialog only closes when clicking the backdrop.

[Niwilai]

@dd-jonas I think I found a solution to this problem. HeadlessUI provides a Portal component, and in my case, when I wrapped React toastify container into this component:

import { Portal } from '@headlessui/react';

<Portal>
  <ToastContainer
    // ... some irrelevant props on the container
  />
</Portal>

It would not close the Dialog anymore when closing the Toast. Maybe this helps.

[jonathanrstern]

@dd-jonas @Niwilai This solution works for me when I'm developing on local, but still running into the problem in production environments.

Any thoughts as to why?

[dd-jonas]

@jonathanrstern I haven't solved this myself yet

[sspenst]

I could not interact with my react-hot-toast until wrapping it in a <Portal>, so this solved one problem for me.

Dialog is still closing when I click within the toast though, I will probably have to implement something like @jonathanrstern mentioned below.

[jonathanrstern]

@dd-jonas Here's the solution I came up with yesterday. Hope it's helpful!

There is likely a more "React way" of doing this, but here's what I've done for now.

<Dialog
  as="div"
  onClose={() => {
    const toastElement: any = document.querySelector(".Toastify");
    const clickedToast = event?.composedPath()?.includes(toastElement);
    if (clickedToast) {
      return;
    }

    handleClose();
  }}
>

[jonathanrstern]

Here's another way of doing this that may be a little cleaner -- still not React-y:

onClose={() => {
    const targetElement = event?.target as Element;
    if (targetElement?.closest(".Toastify")) {
      return;
    }
    handleClose();
  }}

[silviogutierrez]

This worked well, though TIL I learned about the global event object in window. Was wondering where it was coming from.

[tpotjj]

@jonathanrstern & @dd-jonas

I found that there is another way of bypassing this issue, I use Vue3 therefore component looks slightly different.
The idea is that you don't use the onClose that is used by default, but you create your own on-click listener (marked with '<--- HERE').
The on-click listener should not be added on de <Dialog> but on the very first <div> that represents the backdrop of the dialog.

Now don't forget to put your ToastMessage inside a <Portal>.

Here is my Vue3 component:

<template>
  <TransitionRoot appear :show="true" as="template">
    <Dialog as="div" class="relative z-30">
      <TransitionChild
        as="template"
        enter="duration-300 ease-out"
        enter-from="opacity-0"
        enter-to="opacity-100"
        leave="duration-200 ease-in"
        leave-from="opacity-100"
        leave-to="opacity-0"
      >
        <div class="fixed inset-0 bg-black/25" />
      </TransitionChild>

      <div
        @click="$emit('closeModal')"         <--- HERE
        class="fixed inset-0 overflow-y-auto bg-gray-500 bg-opacity-75 transition-opacity"
      >
        <div
          class="flex min-h-full items-center justify-center p-4 text-center"
        >
          <TransitionChild
            as="template"
            enter="duration-300 ease-out"
            enter-from="opacity-0 scale-95"
            enter-to="opacity-100 scale-100"
            leave="duration-200 ease-in"
            leave-from="opacity-100 scale-100"
            leave-to="opacity-0 scale-95"
          >
            <DialogPanel
              class="w-full max-w-md transform overflow-hidden rounded-2xl bg-white dark:bg-slate-800 p-6 text-left align-middle shadow-xl transition-all"
            >
              <DialogTitle
                as="h3"
                class="text-lg mt-4 font-medium leading-6 dark:text-slate-200 text-slate-900"
              >
                {{
                  $t(
                    "platform.memberships.delete_membership_confirmation_title",
                  )
                }}
              </DialogTitle>
              <div class="mt-2">
                <p class="text-sm dark:text-slate-400 text-slate-500">
                  {{
                    $t(
                      "platform.memberships.delete_membership_confirmation_text",
                    )
                  }}
                </p>
              </div>

              <div class="mt-6 flex justify-between">
                <BaseButton
                  :button-theme="themeButtonService.getThemeButtonById(5)"
                  :disabled="submitInProgress"
                  class="font-bold"
                  @click="$emit('closeModal')"
                >
                  {{ $t("global.cancel") }}
                </BaseButton>
                <BaseButton
                  :button-theme="themeButtonService.getThemeButtonById(8)"
                  :disabled="submitInProgress"
                  class="font-bold"
                  @click="$emit('deleteMembership')"
                >
                  <BaseSpinnerSmall
                    :submit-in-progress="submitInProgress"
                    spinner-text="global.deleting"
                    button-text="global.delete"
                  />
                </BaseButton>
              </div>
            </DialogPanel>
          </TransitionChild>
        </div>
      </div>
    </Dialog>
  </TransitionRoot>
</template>

<script setup lang="ts">
import {
  TransitionRoot,
  TransitionChild,
  Dialog,
  DialogPanel,
  DialogTitle,
} from "@headlessui/vue";
import { themeButtonService } from "~/services/theme/ThemeButtonService";

interface Props {
  submitInProgress: boolean;
}

defineProps<Props>();

defineEmits(["closeModal", "deleteMembership"]);
</script>

Here is how I specified my ToastMessage:

<template>
  <div>
    <Portal class="z-50">
      <ModalMessage />
      <ToastMessage />
    </Portal>
    <TheSidebar :sidebar-open="sidebarOpen" @toggle-sidebar="toggleSidebar" />
    <TheTopbar :sidebar-open="sidebarOpen" @toggle-sidebar="toggleSidebar" />
    <div class="xl:pl-72">
      <slot class="bg-slate-100 dark:bg-slate-900"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Portal } from "@headlessui/vue";
import TheSidebar from "@/components/platform/sidebar/TheSidebar.vue";
import TheTopbar from "@/components/platform/topbar/TheTopbar.vue";
// This import is here to make sure the proper theme is set
// when reloading one of the Auth pages
import { themeColorService } from "~/services/theme/ThemeColorService";
import ToastMessage from "~/components/response/ToastMessage.vue";
import ModalMessage from "~/components/response/ModalMessage.vue";

themeColorService.getTheme();

const sidebarOpen = ref(false);

function toggleSidebar() {
  sidebarOpen.value = !sidebarOpen.value;
}
</script>