From 0d7447ef3f888f1da172f91c339056bc8372cdd1 Mon Sep 17 00:00:00 2001
From: Shinichi Okada <147320+shinokada@users.noreply.github.com>
Date: Sat, 21 Sep 2024 01:55:35 +0200
Subject: [PATCH] Make Popper close automaticially after 3secs on touch devices

When triggering a Tooltip/Speeddial/Popover on a touch device
it will close after 3secs (or "closeOnTouchDelay" ms) when set to
trigger="hover".

Furthermore Svelte 5 will now behave identical to Svelte 4
(instead of two touches a single one is required)
---
 src/lib/speed-dial/SpeedDial.svelte   |  6 ++---
 src/lib/utils/Popper.svelte           | 34 ++++++++++++++++++---------
 src/routes/docs/components/tooltip.md |  6 +++--
 3 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/lib/speed-dial/SpeedDial.svelte b/src/lib/speed-dial/SpeedDial.svelte
index 156b6811f..99db9d8e8 100644
--- a/src/lib/speed-dial/SpeedDial.svelte
+++ b/src/lib/speed-dial/SpeedDial.svelte
@@ -46,7 +46,7 @@
   setContext<SpeedCtxType>('speed-dial', { pill, tooltip, textOutside });
 
   let divClass: string;
-  $: divClass = twMerge(defaultClass, 'group', $$props.class);
+  $: divClass = twMerge(defaultClass, $$props.class);
 
   let poperClass: string;
   $: poperClass = twMerge(popperDefaultClass, ['top', 'bottom'].includes(placement.split('-')[0]) && 'flex-col');
@@ -59,7 +59,7 @@
     {#if gradient}
       <GradientButton {pill} {name} aria-controls={id} aria-expanded={open} {...$$restProps} class="!p-3">
         <slot name="icon">
-          <svg aria-hidden="true" class="w-8 h-8 transition-transform group-hover:rotate-45" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <svg aria-hidden="true" class="w-8 h-8 transition-transform" class:rotate-45={open} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
           </svg>
         </slot>
@@ -68,7 +68,7 @@
     {:else}
       <Button {pill} {name} aria-controls={id} aria-expanded={open} {...$$restProps} class="!p-3">
         <slot name="icon">
-          <svg aria-hidden="true" class="w-8 h-8 transition-transform group-hover:rotate-45" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <svg aria-hidden="true" class="w-8 h-8 transition-transform" class:rotate-45={open} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
           </svg>
         </slot>
diff --git a/src/lib/utils/Popper.svelte b/src/lib/utils/Popper.svelte
index f1ed1c263..81db9ed64 100644
--- a/src/lib/utils/Popper.svelte
+++ b/src/lib/utils/Popper.svelte
@@ -17,6 +17,7 @@
     strategy?: 'absolute' | 'fixed';
     open?: boolean;
     yOnly?: boolean;
+    closeOnTouchDelay?: number;
   }
 
   export let activeContent: boolean = false;
@@ -29,6 +30,7 @@
   export let strategy: 'absolute' | 'fixed' = 'absolute';
   export let open: boolean = false;
   export let yOnly: boolean = false;
+  export let closeOnTouchDelay: number = 3000;
   // extra floating UI middleware list
   export let middlewares: Middleware[] = [dom.flip(), dom.shift()];
 
@@ -52,6 +54,7 @@
   let arrowEl: HTMLElement | null;
   let contentEl: HTMLElement;
   let triggerEls: HTMLElement[] = [];
+  let timer: number|undefined = undefined;
 
   const showHandler = (ev: Event) => {
     if (referenceEl === undefined) console.error('trigger undefined');
@@ -60,7 +63,9 @@
       if (open) return; // If the popper is already open after the reference element has changed
     }
 
-    open = ev.type === 'click' ? !open : true;
+    setTimeout(() => {
+      open = ev.type === 'click' ? !open : true;
+    }, (ev as PointerEvent).pointerType === "touch" ? 300 : 0)
   };
 
   const hasHover = (el: Element) => el.matches(':hover');
@@ -68,16 +73,22 @@
   const px = (n: number | undefined) => (n ? `${n}px` : '');
 
   const hideHandler = (ev: Event) => {
-    if (activeContent && hoverable) {
+    const isTouch = ((ev as PointerEvent).pointerType ?? "mouse") == "touch";
+    if (isTouch && closeOnTouchDelay == -1)
+      return;  // keep touch devices open until tap outside
+    if ((isTouch || activeContent) && hoverable) {
       const elements = [referenceEl, floatingEl, ...triggerEls].filter(Boolean);
       // Add a delay before hiding the floating element to account for hoverable elements. 
       // This ensures that the floating element does not hide immediately when the mouse 
       // moves from the reference element to the floating element.
-      setTimeout(() => {
-        if (ev.type === 'mouseleave' && !elements.some(hasHover)) {
+      const closeDelay = isTouch ? closeOnTouchDelay : 100;
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        if ((ev.type === 'mouseleave' || ev.type === 'pointerleave') &&
+            (isTouch || !elements.some(hasHover))) {
           open = false;
         }
-      }, 100);
+      }, closeDelay) as unknown as number;
     } else {
       open = false;
     }
@@ -130,8 +141,8 @@
       ['focusin', showHandler, focusable],
       ['focusout', hideHandler, focusable],
       ['click', showHandler, clickable],
-      ['mouseenter', showHandler, hoverable],
-      ['mouseleave', hideHandler, hoverable]
+      ['pointerenter', showHandler, hoverable],
+      ['pointerleave', hideHandler, hoverable]
     ];
 
     if (triggeredBy) triggerEls = [...document.querySelectorAll<HTMLElement>(triggeredBy)];
@@ -152,13 +163,13 @@
         console.error(`Popup reference not found: '${reference}'`);
       } else {
         if (focusable) referenceEl.addEventListener('focusout', hideHandler);
-        if (hoverable) referenceEl.addEventListener('mouseleave', hideHandler);
+        if (hoverable) referenceEl.addEventListener('pointerleave', hideHandler);
       }
     } else {
       referenceEl = triggerEls[0];
     }
 
-    if (clickable) document.addEventListener('click', closeOnClickOutside);
+    document.addEventListener('click', closeOnClickOutside);
 
     return () => {
       // This is onDestroy function
@@ -170,7 +181,7 @@
 
       if (referenceEl) {
         referenceEl.removeEventListener('focusout', hideHandler);
-        referenceEl.removeEventListener('mouseleave', hideHandler);
+        referenceEl.removeEventListener('pointerleave', hideHandler);
       }
 
       document.removeEventListener('click', closeOnClickOutside);
@@ -184,7 +195,7 @@
   function closeOnClickOutside(event: MouseEvent) {
     if (open) {
       if (!event.composedPath().includes(floatingEl) && !triggerEls.some((el) => event.composedPath().includes(el))) {
-        hideHandler(event);
+        open = false;
       }
     }
   }
@@ -232,4 +243,5 @@
 @prop export let open: boolean = false;
 @prop export let yOnly: boolean = false;
 @prop export let middlewares: Middleware[] = [dom.flip(), dom.shift()];
+@prop export let closeOnTouchDelay: number = 3000;
 -->
diff --git a/src/routes/docs/components/tooltip.md b/src/routes/docs/components/tooltip.md
index f39f6aed5..83b4fa51a 100644
--- a/src/routes/docs/components/tooltip.md
+++ b/src/routes/docs/components/tooltip.md
@@ -104,12 +104,14 @@ The positioning of the tooltip element relative to the triggering element (eg. b
 ```svelte example class="flex items-end gap-2 h-32" hideResponsiveButtons
 <script>
   import { Tooltip, Button } from 'flowbite-svelte';
+  let actions = "";
 </script>
 
-<Button id="hover">Tooltip hover</Button>
-<Button id="click">Tooltip click</Button>
+<Button id="hover" on:click={() => (actions = "Clicked Hover-Tooltip Button\n" + actions)}>Tooltip hover</Button>
+<Button id="click" on:click={() => (actions = "Clicked Click-Tooltip Button\n" + actions)}>Tooltip click</Button>
 <Tooltip triggeredBy="#hover">Hover tooltip content</Tooltip>
 <Tooltip trigger="click" triggeredBy="#click">Click tooltip content</Tooltip>
+<pre style="height: 4rem; overflow:hidden;">{actions}</pre>
 ```
 
 ## Disable arrow