Support multiple <Dialog /> components

[RobinMalfait]

Currently we only support a single Dialog or nested Dialog components. We also want to be able to open multiple Dialogs at the same time where typically the top most Dialog "wins" and receives and locks the focus.

If all Dialogs are closed, only then do we want to restore the scroll lock, inert others, ... which is currently not the case.

Some references:

• Two Dialog use react context trigger close will result someone can not correct closed & wrong body overflow:hidden #1539
• [Bug]: Two dialogs - There are no focusable elements inside the <FocusTrap /> #493
• [Bug]: Uncaught RangeError: Maximum call stack size exceeded. focusElement of Modal #825

[WesleyKapow]

Just hit this issue as well. In our case we have an open dialog with a button that opens another dialog. The first dialog should close and the second should open. As these happen simultaneously with transitions, the useScrollLock functionality gets out-of-sync and we end up with overflow: hidden NOT being present on the html element when the second dialog is open. And even worse, closing this second dialog then adds it! Causing the body to remain locked when the dialog is closed!

For now our solution is to wait for the first dialog to close before opening the second dialog.

[hanihusam]

I have the same issue. Technically, how did you handle it? Did you use setTimeout to add a delay to open the second dialog? @WesleyKapow

[YoavGrosman]

@hanihusam that's what I did, added a 100milisec to a setTimeout and the set true on my second dialog state

[YoavGrosman]

Any suggestions on how to deal with this? I have 2 different modals on my page, one for a sign up form, and a second modal as thank you modal. What's the optimal way to implement this?

[vegawong]

I have such a scenario where there is a global dialog, such as a login or registration form, which can be triggered at any time, on the page layer, in the first-level dialog, or even in a second-level dialog. If I have to use component hierarchy to implement nesting, this global dialog component will be ubiquitous, leading to a lot of redundant code. Is there any solution for this situation?

[heychazza]

Dealing with the same! I don't want to nest a modal within another. The only "solution" is to close the first modal, then open second after ~250ms. But then the app looks laggy

[goulashify]

Hello there.

Modals work fine as long as there is only one open, so I made a stack system similar to what Apple does on iPhones to track navigation. This way, I can open them in whatever combinations, and they work fine on iOS also (where if you open two modals at the same time right now, you can't scroll, at least on my env).

The gist of it:

• create a store that tracks which modal was opened last
• create a modal component that opens if: it's open (props) AND it's the topmost, and notifies the store
• use the modal component anytime you make a modal.

// component/molecule/Modal.vue
<script setup lang="ts">
import {Dialog, TransitionChild, TransitionRoot} from '@headlessui/vue'
import {computed, watch} from "vue";
import useModals from "@/service/modals";

const props = withDefaults(defineProps<{ open: boolean }>(), {open: false});
const emits = defineEmits<{ (e: 'close'): void }>();

// State, used to track whether this is the topmost modal (otherwise it bugs out on iOS).
const modals = useModals();
const modalId = modals.newId();
const isTopmostModal = computed(() => {
  console.log('Recalculating open. modal_id=%o; is_open=%o;', modalId, modals.topmostModal.value === modalId);
  return modals.topmostModal.value === modalId;
});

watch(() => props.open, (current, previous) => {
  // When this changes, either we opened or closed the modal.
  let opened = previous === false && current === true;
  let closed = !opened;

  if (opened) modals.onOpen(modalId);
  if (closed) modals.onClose(modalId);
})

console.log('Creating modal. id=%o', modalId);

// --- UI Events.
function onClose() {
  emits("close");
}
</script>

<template>
  <TransitionRoot as="template" :show="props.open && isTopmostModal">
    <Dialog as="div" class="relative z-10" @close="onClose">
      <TransitionChild as="template" enter="ease-out duration-300"
                       enter-from="opacity-0 translate-y-4 md:translate-y-0 md:scale-95"
                       enter-to="opacity-100 translate-y-0 md:scale-100" leave="ease-in duration-200"
                       leave-from="opacity-100 translate-y-0 md:scale-100"
                       leave-to="opacity-0 translate-y-4 md:translate-y-0 md:scale-95">
        <slot></slot>
      </TransitionChild>
    </Dialog>
  </TransitionRoot>
</template>

// service/modals.ts
import {computed, ref} from "vue";

const openModals = ref<string[]>([]);
const topmostModal = computed<string | undefined>(() => {
    let open = openModals.value;
    return open.length > 0 ? open[open.length - 1] : undefined;
})

function newId() {
    return crypto.randomUUID();
}

/**
 * Registers a modal as open (on top of everything else already opened).
 * @return id of the opened modal that should be returned to onModalClose();
 */
function onOpen(id: string) {
    openModals.value.push(id);
}

/**
 * Removes the top modal form the list.
 */
function onClose(id: string) {
    openModals.value = openModals.value.filter(openedId => openedId !== id);
}

export default function useModals() {
    return {
        newId,
        topmostModal,
        onOpen,
        onClose,
    }
}

[heychazza]

Thanks a ton for this! How do you deal with when a user closes the sub-modal?

E.g. they load the first modal which has a table, they press "Add". Now they're presented with a sub-modal for adding a new user. Once they press "Save", how would you trigger the close event?

[goulashify]

Hey Charlie,

See basic example here. Use Chrome, Safari doesn't play well with Stackblitz.

Good luck,
– Dani

[heychazza]

Hey @goulashify thanks a ton for this! Awesome and straight forward to imlement.

You don’t use Inertiajs by any chance? Annoyingly when I save the form the modal gets closed. I’m wondering if there’s any extra logic I could add into that service class, to delete that model and return the previous one

[goulashify]

@heychazza: sorry, nope. I'm building w/ Vue3+gRPC. Good luck with the issue in any case!

[xak2000]

Thank you for the idea @goulashify!

Unfortunately, this solution still has problems with concurrency when TransitionRoot is involved.
Example: https://stackblitz.com/edit/vite-nwmucx?file=src%2FApp.vue

If you click open both button, then close both dialogs, then click open both button again, and then close only 2nd dialog, the 1st will be hidden (while it should be shown).

In my local project where multiple TransitionChilds are present, I seen even more sophisticated bugs related to this. E.g. closing the 2nd modal somehow leads to emitting @close event from the 1st modal, etc. As soon as I remove TransitionRoot all is starting to work fine.

Maybe I need to synchronize somehow the lifecycle of transitions with the component logic..