From 901d3f4db06ccd1bd00e2b2ca1c3203e1892b16d Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <leopoldthecuber@gmail.com>
Date: Fri, 14 Jun 2024 17:45:09 +0800
Subject: [PATCH] fix(kpop): flip

---
 src/components/KPop/KPop.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/KPop/KPop.vue b/src/components/KPop/KPop.vue
index ba0df454dd..ec62edb305 100644
--- a/src/components/KPop/KPop.vue
+++ b/src/components/KPop/KPop.vue
@@ -22,6 +22,7 @@
       <div
         v-show="isVisible"
         :id="popoverId"
+        :key="popoverKey"
         ref="popoverElement"
         :aria-labelledby="$slots.title || title ? titleId : undefined"
         class="popover"
@@ -83,7 +84,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue'
+import { ref, onMounted, onBeforeUnmount, computed, watch, nextTick } from 'vue'
 import type { PropType } from 'vue'
 import { useFloating, autoUpdate, autoPlacement, flip, shift, size } from '@floating-ui/vue'
 import type { PopPlacements, PopTrigger } from '@/types'
@@ -168,6 +169,7 @@ const kPopoverElement = ref<HTMLElement | null>(null)
 const triggerWrapperElement = ref<HTMLElement | null>(null)
 const popoverElement = ref<HTMLElement | null>(null)
 const isVisible = ref<boolean>(false)
+const popoverKey = ref(0)
 
 const popoverTrigger = computed((): HTMLElement | null => triggerWrapperElement.value && triggerWrapperElement.value?.children[0] ? triggerWrapperElement.value?.children[0] as HTMLElement : null)
 
@@ -181,13 +183,15 @@ const togglePopover = () => {
   }
 }
 
-const showPopover = () => {
+const showPopover = async () => {
   if (!props.disabled) {
     if (timer.value) {
       clearTimeout(timer.value)
     }
 
     isVisible.value = true
+    await nextTick()
+    popoverKey.value++
   }
 }