From 07a4d13c0fcb05c87fb42e02a3a2d6c5c52ccf09 Mon Sep 17 00:00:00 2001
From: Eugen Istoc <eugenistoc@gmail.com>
Date: Fri, 5 Apr 2024 13:31:29 -0400
Subject: [PATCH] fix(Slideover): wait for transition to complete to reset
 state (#1624)

---
 src/runtime/components/overlays/Slideover.vue         | 9 +++++++--
 src/runtime/components/overlays/Slideovers.client.vue | 3 ++-
 src/runtime/composables/useSlideover.ts               | 5 ++++-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/runtime/components/overlays/Slideover.vue b/src/runtime/components/overlays/Slideover.vue
index 59f0cb8d..904470ff 100644
--- a/src/runtime/components/overlays/Slideover.vue
+++ b/src/runtime/components/overlays/Slideover.vue
@@ -1,5 +1,5 @@
 <template>
-  <TransitionRoot as="template" :appear="appear" :show="isOpen">
+  <TransitionRoot as="template" :appear="appear" :show="isOpen" @after-leave="onAfterLeave">
     <HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }]" 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]" />
@@ -71,7 +71,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('slideover', toRef(props, 'ui'), config, toRef(props, 'class'))
 
@@ -109,6 +109,10 @@ export default defineComponent({
       emit('close')
     }
 
+    const onAfterLeave = () => {
+      emit('after-leave')
+    }
+
     provideUseId(() => useId())
 
     return {
@@ -117,6 +121,7 @@ export default defineComponent({
       attrs,
       isOpen,
       transitionClass,
+      onAfterLeave,
       close
     }
   }
diff --git a/src/runtime/components/overlays/Slideovers.client.vue b/src/runtime/components/overlays/Slideovers.client.vue
index 933c8e61..84181c29 100644
--- a/src/runtime/components/overlays/Slideovers.client.vue
+++ b/src/runtime/components/overlays/Slideovers.client.vue
@@ -4,6 +4,7 @@
     v-if="slideoverState"
     v-bind="slideoverState.props"
     v-model="isOpen"
+    @after-leave="reset"
   />
 </template>
 
@@ -13,5 +14,5 @@ import { useSlideover, slidOverInjectionKey } from '../../composables/useSlideov
 
 const slideoverState = inject(slidOverInjectionKey)
 
-const { isOpen } = useSlideover()
+const { isOpen, reset } = useSlideover()
 </script>
diff --git a/src/runtime/composables/useSlideover.ts b/src/runtime/composables/useSlideover.ts
index f9d527ea..655eee53 100644
--- a/src/runtime/composables/useSlideover.ts
+++ b/src/runtime/composables/useSlideover.ts
@@ -24,11 +24,13 @@ function _useSlideover () {
     isOpen.value = true
   }
 
-  function close () {
+  async function close () {
     if (!slideoverState) return
 
     isOpen.value = false
+  }
 
+  function reset () {
     slideoverState.value = {
       component: 'div',
       props: {}
@@ -53,6 +55,7 @@ function _useSlideover () {
   return {
     open,
     close,
+    reset,
     patch,
     isOpen
   }