From e0724b2018a2c61d34198c0f551ef7c34e3a91e9 Mon Sep 17 00:00:00 2001
From: Josemar Luedke <josemarluedke@gmail.com>
Date: Wed, 6 Nov 2024 11:43:12 -0800
Subject: [PATCH] bug: fix popover closing and opening on hover

---
 packages/overlays/src/components/popover.gts | 27 ++++++++++++++++----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/overlays/src/components/popover.gts b/packages/overlays/src/components/popover.gts
index 1fa443b1..c7420c1f 100644
--- a/packages/overlays/src/components/popover.gts
+++ b/packages/overlays/src/components/popover.gts
@@ -7,6 +7,7 @@ import { guidFor } from '@ember/object/internals';
 import { hash } from '@ember/helper';
 import { useStyles } from '@frontile/theme';
 import { modifier } from 'ember-modifier';
+import { debounce } from '@ember/runloop';
 import type { ModifierLike } from '@glint/template';
 import type { WithBoundArgs } from '@glint/template';
 import type { Signature as VelcroSignature } from 'ember-velcro/modifiers/velcro';
@@ -131,26 +132,40 @@ class Popover extends Component<PopoverSignature> {
     if (typeof this.args.didClose === 'function') {
       this.args.didClose();
     }
+
+    debounce(this, this.didClose, 90);
   };
 
   trigger = modifier(
     (el: HTMLElement, [eventType]: [eventType?: 'click' | 'hover']) => {
       this.triggerEl = el as HTMLLIElement;
+
+      const debounceDuration = 100;
+
+      const open = () => {
+        debounce(this, this.open, debounceDuration);
+      };
+
+      const close = () => {
+        debounce(this, this.close, debounceDuration);
+      };
+
       if (eventType === 'hover') {
         this.preventFocusRestore = true;
-        el.addEventListener('mouseenter', this.open);
-        el.addEventListener('mouseleave', this.close);
+        el.addEventListener('mouseenter', open);
+        el.addEventListener('mouseleave', close);
       } else {
         el.addEventListener('click', this.toggle);
       }
+
       el.setAttribute('aria-haspopup', 'true');
       el.setAttribute('aria-controls', this.menuId);
       el.setAttribute('aria-expanded', this.isOpen.toString());
 
       return () => {
         if (eventType === 'hover') {
-          el.removeEventListener('mouseenter', this.open);
-          el.removeEventListener('mouseleave', this.close);
+          el.removeEventListener('mouseenter', open);
+          el.removeEventListener('mouseleave', close);
         } else {
           el.removeEventListener('click', this.toggle);
         }
@@ -166,7 +181,9 @@ class Popover extends Component<PopoverSignature> {
   });
 
   didClose = () => {
-    this.isClosing = false;
+    if (!this.isDestroyed || !this.isDestroying) {
+      this.isClosing = false;
+    }
   };
 
   <template>