Weird rendering loop / unexpected behaviour

[lepikhinb]

Weird rendering loop / unexpected behaviour

[lepikhinb]

You shouldn't use a layout in the modal component. Layout can only be used for the root (parent) page.

Also, you should use the methods close, redirect, and the visibility variable show provided by the useModal() method, to manage the state of the modal.

Please check the official example implementation.

<script setup>
import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from "@headlessui/vue";
import { CheckIcon } from "@heroicons/vue/24/outline";
import { useModal } from "momentum-modal";

const { show, close, redirect } = useModal();
</script>

<template>
  <TransitionRoot :show="show" as="template">
    <Dialog as="div" class="relative z-10" @close="close">
      <TransitionChild
        @after-leave="redirect"
        as="template"
        enter="ease-out duration-300"
        enter-from="opacity-0"
        enter-to="opacity-100"
        leave="ease-in duration-200"
        leave-from="opacity-100"
        leave-to="opacity-0"
      >
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
      </TransitionChild>
    </Dialog>
  </TransitionRoot>
</template>

Check the video with the changes applied: https://share.cleanshot.com/9H6b8k.

[haztakki]

Hey,
Thanks for looking into this. Yeah, the layout doesn't make sense in the modal component. Though the other side effects I mentioned was also throwing me a bit. I guess I just needed to use close and redirect methods like you said. I guess this is the missing piece. Thanks! I'll close this now, and I will reopen if needed.