feat: add focus only trigger mode for Popper (#1241)

themesberg · Feb 16, 2024 · f7ca868 · f7ca868
1 parent 0e5ff6c
commit f7ca868
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/src/lib/speed-dial/SpeedDial.svelte b/src/lib/speed-dial/SpeedDial.svelte
@@ -21,7 +21,7 @@
   export let placement: Placement = 'top';
   export let pill: boolean = true;
   export let tooltip: Placement | 'none' = 'left';
-  export let trigger: 'hover' | 'click' = 'hover';
+  export let trigger: 'hover' | 'click' | 'focus' = 'hover';
   export let textOutside: boolean = false;
   export let id: string = generateId();
   export let name: string = 'Open actions menu';
@@ -71,7 +71,7 @@
 @prop export let placement: Placement = 'top';
 @prop export let pill: boolean = true;
 @prop export let tooltip: Placement | 'none' = 'left';
-@prop export let trigger: 'hover' | 'click' = 'hover';
+@prop export let trigger: 'hover' | 'click' | 'focus' = 'hover';
 @prop export let textOutside: boolean = false;
 @prop export let id: string = generateId();
 @prop export let name: string = 'Open actions menu';

diff --git a/src/lib/utils/Popper.svelte b/src/lib/utils/Popper.svelte
@@ -11,7 +11,7 @@
     arrow?: boolean;
     offset?: number;
     placement?: Placement;
-    trigger?: 'hover' | 'click';
+    trigger?: 'hover' | 'click' | 'focus';
     triggeredBy?: string;
     reference?: string;
     strategy?: 'absolute' | 'fixed';
@@ -23,7 +23,7 @@
   export let arrow: boolean = true;
   export let offset: number = 8;
   export let placement: Placement = 'top';
-  export let trigger: 'hover' | 'click' = 'hover';
+  export let trigger: 'hover' | 'click' | 'focus' = 'hover';
   export let triggeredBy: string | undefined = undefined;
   export let reference: string | undefined = undefined;
   export let strategy: 'absolute' | 'fixed' = 'absolute';
@@ -37,6 +37,9 @@
   let clickable: boolean;
   $: clickable = trigger === 'click';
 
+  let hoverable: boolean;
+  $: hoverable = trigger === 'hover';
+
   $: dispatch('show', open);
   $: placement && (referenceEl = referenceEl);
 
@@ -120,8 +123,8 @@
       ['focusin', showHandler, true],
       ['focusout', hideHandler, true],
       ['click', showHandler, clickable],
-      ['mouseenter', showHandler, !clickable],
-      ['mouseleave', hideHandler, !clickable]
+      ['mouseenter', showHandler, hoverable],
+      ['mouseleave', hideHandler, hoverable]
     ];
 
     if (triggeredBy) triggerEls = [...document.querySelectorAll<HTMLElement>(triggeredBy)];
@@ -142,7 +145,7 @@
         console.error(`Popup reference not found: '${reference}'`);
       } else {
         referenceEl.addEventListener('focusout', hideHandler);
-        if (!clickable) referenceEl.addEventListener('mouseleave', hideHandler);
+        if (hoverable) referenceEl.addEventListener('mouseleave', hideHandler);
       }
     } else {
       referenceEl = triggerEls[0];
@@ -198,7 +201,7 @@
 @prop export let arrow: boolean = true;
 @prop export let offset: number = 8;
 @prop export let placement: Placement = 'top';
-@prop export let trigger: 'hover' | 'click' = 'hover';
+@prop export let trigger: 'hover' | 'click' | 'focus' = 'hover';
 @prop export let triggeredBy: string | undefined = undefined;
 @prop export let reference: string | undefined = undefined;
 @prop export let strategy: 'absolute' | 'fixed' = 'absolute';

diff --git a/src/routes/docs/components/popover.md b/src/routes/docs/components/popover.md
@@ -305,8 +305,10 @@ Set the position of the popover component relative to the trigger element by usi
 
 <Button id="hover">Hover popover</Button>
 <Button id="click">Click popover</Button>
+<Button id="focus">Focus popover</Button>
 <Popover class="w-64 text-sm font-light " title="Popover title" triggeredBy="#hover" trigger="hover">And here's some amazing content. It's very engaging. Right?</Popover>
 <Popover class="w-64 text-sm font-light " title="Popover title" triggeredBy="#click" trigger="click">And here's some amazing content. It's very engaging. Right?</Popover>
+<Popover class="w-64 text-sm font-light " title="Popover title" triggeredBy="#focus" trigger="focus">And here's some amazing content. It's very engaging. Right?</Popover>
 ```
 
 ## Offset