From b50fbcf760e908579e81f6e57234f2080e2bf035 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Mon, 4 Mar 2024 11:47:34 +0100
Subject: [PATCH] fix(Popover): improve `hover` mode on touch devices

---
 src/runtime/components/overlays/Popover.vue | 22 +++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/runtime/components/overlays/Popover.vue b/src/runtime/components/overlays/Popover.vue
index 14e794ef..e2ef73f3 100644
--- a/src/runtime/components/overlays/Popover.vue
+++ b/src/runtime/components/overlays/Popover.vue
@@ -7,7 +7,8 @@
       :disabled="disabled"
       :class="ui.trigger"
       role="button"
-      @mouseover="onMouseOver"
+      @mouseenter="onMouseEnter"
+      @touchstart.prevent="onTouchStart"
     >
       <slot :open="open" :close="close">
         <button :disabled="disabled">
@@ -20,7 +21,7 @@
       <div v-if="open" :class="[ui.overlay.base, ui.overlay.background]" />
     </Transition>
 
-    <div v-if="open" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
+    <div v-if="open" ref="container" :class="[ui.container, ui.width]" :style="containerStyle">
       <Transition appear v-bind="ui.transition">
         <div>
           <div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />
@@ -153,7 +154,19 @@ export default defineComponent({
       }
     })
 
-    function onMouseOver () {
+    function onTouchStart () {
+      if (!popoverApi.value) {
+        return
+      }
+
+      if (popoverApi.value.popoverState === 0) {
+        popoverApi.value.closePopover()
+      } else {
+        popoverApi.value.togglePopover()
+      }
+    }
+
+    function onMouseEnter () {
       if (props.mode !== 'hover' || !popoverApi.value) {
         return
       }
@@ -223,7 +236,8 @@ export default defineComponent({
       trigger,
       container,
       containerStyle,
-      onMouseOver,
+      onTouchStart,
+      onMouseEnter,
       onMouseLeave
     }
   }