Headless UI transition leave in Vue3 with pinia and childcomponent

[grelle]

I have a Vue3 project with Pinia as state management. Using Headless UI with my modals and trying to wrap my head around the transitions. When using a child component mounted in the parent DOM and being dependent on state from Pinia that will be set when clicked the transition animates on open dialog but not on close.

I guess this has to do with me mounting the child component using:
<Childcomponent v-if="openEditDialog" />

As soon as I remove the v-if on the child it seems to work so it has to do with unmounting of the child. I'm having trouble being without the v-if though as the childcomponent is heavily dependent on the pinia state that is populated on click, I've tried populating the state on load with null values but then I run in to the issue that the child component does not reload with real data is it is already loaded with null values.

When the dialog is closed I set openEditDialog ref to false and that seems to unmount the child component before the animation can take place. All transition code is inside the child component. Shouldn't Vue3 keep track of that the animation has to finish before removing the childcomponent ?

Parent:

<template>
  <NewEventDialogComponent v-if="openNewEventDialog" />
  <EditEventDialogComponent v-if="openEditEventDialog" />

Child:

  <TransitionRoot :show="openEditEventDialog" as="template">
    <Dialog as="div" class="relative z-60" @keyup.esc="closeModal" @keyup.ctrl.enter="v$.$invalid ? null : editPost()">
      <TransitionChild
        as="template"
        enter="duration-200 ease-out"
        enter-from="bg-opacity-0"
        enter-to="bg-opacity-100"
        leave="duration-50 ease-in"
        leave-from="opacity-100"
        leave-to="opacity-0"
      >
        <DialogOverlay class="fixed inset-0 bg-black opacity-60 transition-all" />
      </TransitionChild>
      <div class="fixed inset-0 z-40 overflow-y-auto">
        <div class="flex items-start justify-center min-h-screen px-4 text-center">
          <TransitionChild
            as="template"
            enter="duration-200 ease-out"
            enter-from="opacity-0 scale-95"
            enter-to="opacity-100 scale-100"
            leave="duration-100 ease-in"
            leave-from="opacity-100"
            leave-to="opacity-0"
          >
            <DialogPanel
              class="inline-block ring-2 ring-bali-hai-600 w-full max-w-2xl p-6 my-6 overflow-hidden text-left align-middle transition-all transform bg-bali-hai-700 shadow-xl shadow-bali-hai-800 rounded-xl"
            >```

[piersrr]

I also have this. Did you find a solution?

[grelle]

Yes we solved it by moving TransitionRoot to the parent and wrapping the child with it like this:

Parent:

<TransitionRoot appear :show="openNewEventDialog" as="template">
    <NewEventDialogComponent ref="newEventDialogUpdate" />
</TransitionRoot>

Child:

<template>
  <Dialog as="div" class="relative z-60" @keyup.esc="closeModal" @keyup.ctrl.enter="v$.$invalid ? null : savePost()">
    <TransitionChild
      as="template"
      enter="duration-100 ease-out"
      enter-from="bg-opacity-0"
      enter-to="bg-opacity-100"
      leave="duration-200 ease-out"
      leave-from="bg-opacity-100"
      leave-to="bg-opacity-0"
    >
      <DialogOverlay class="fixed inset-0 bg-black opacity-60 transition-all" />
    </TransitionChild>