fix(Modal): Wait for transition to complete to reset state

nuxt · Apr 4, 2024 · d37e274 · d37e274
1 parent 4f0dc32
commit d37e274
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/src/runtime/components/overlays/Modal.vue b/src/runtime/components/overlays/Modal.vue
@@ -1,5 +1,5 @@
 <template>
-  <TransitionRoot :appear="appear" :show="isOpen" as="template">
+  <TransitionRoot :appear="appear" :show="isOpen" as="template" @after-leave="onAfterLeave">
     <HDialog :class="ui.wrapper" v-bind="attrs" @close="close">
       <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
         <div :class="[ui.overlay.base, ui.overlay.background]" />
@@ -82,7 +82,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  emits: ['update:modelValue', 'close', 'close-prevented'],
+  emits: ['update:modelValue', 'close', 'close-prevented', 'after-leave'],
   setup (props, { emit }) {
     const { ui, attrs } = useUI('modal', toRef(props, 'ui'), config, toRef(props, 'class'))
 
@@ -117,6 +117,10 @@ export default defineComponent({
       emit('close')
     }
 
+    const onAfterLeave = () => {
+      emit('after-leave')
+    }
+
     provideUseId(() => useId())
 
     return {
@@ -125,7 +129,8 @@ export default defineComponent({
       attrs,
       isOpen,
       transitionClass,
-      close
+      onAfterLeave,
+      close,
     }
   }
 })

diff --git a/src/runtime/components/overlays/Modals.client.vue b/src/runtime/components/overlays/Modals.client.vue
@@ -1,5 +1,11 @@
 <template>
-  <component :is="modalState.component" v-if="modalState" v-bind="modalState.props" v-model="isOpen" />
+  <component
+    :is="modalState.component"
+    v-if="modalState"
+    v-bind="modalState.props"
+    v-model="isOpen"
+    @after-leave="reset"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -8,5 +14,5 @@ import { useModal, modalInjectionKey } from '../../composables/useModal'
 
 const modalState = inject(modalInjectionKey)
 
-const { isOpen } = useModal()
+const { isOpen, reset } = useModal()
 </script>
diff --git a/src/runtime/composables/useModal.ts b/src/runtime/composables/useModal.ts
@@ -19,8 +19,11 @@ function _useModal () {
     isOpen.value = true
   }
 
-  function close () {
+  async function close () {
     isOpen.value = false
+  }
+
+  function reset() {
     modalState.value = {
       component: 'div',
       props: {}
@@ -44,7 +47,8 @@ function _useModal () {
     isOpen,
     open,
     close,
-    patch
+    reset,
+    patch,
   }
 }