From 3e801584b70796ab0749d4d2c9654dc586d948eb Mon Sep 17 00:00:00 2001
From: Jordan Jones <jmjones2463@gmail.com>
Date: Wed, 6 Mar 2024 12:04:05 -0800
Subject: [PATCH] feat(mouseover): improve handling of showing popover on
 mouseover

---
 src/auro-popover.js | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/auro-popover.js b/src/auro-popover.js
index d8d8dc4..a0b7778 100644
--- a/src/auro-popover.js
+++ b/src/auro-popover.js
@@ -133,11 +133,6 @@ export class AuroPopover extends LitElement {
     }
   }
 
-  // randomId() {
-  //   const random = (Math.random() + 1).toString(36).substring(7);
-  //   return `popover-${random}`
-  // }
-
   /**
    * Hides the popover.
    * @private
@@ -147,6 +142,8 @@ export class AuroPopover extends LitElement {
     this.popper.hide();
     this.isPopoverVisible = false;
     this.removeAttribute('data-show');
+
+    document.querySelector('body').removeEventListener('mouseover', this.mouseoverHandler);
   }
 
   /**
@@ -158,6 +155,22 @@ export class AuroPopover extends LitElement {
     this.popper.show();
     this.isPopoverVisible = true;
     this.setAttribute('data-show', true);
+
+    this.mouseoverHandler = (evt) => this.handleMouseoverEvent(evt);
+
+    document.querySelector('body').addEventListener('mouseover', this.mouseoverHandler);
+  }
+
+  /**
+   * Hides the popover when hovering outside of the popover or it's trigger.
+   * @private
+   * @param {Event} evt - The event object.
+   * @returns {void}
+   */
+  handleMouseoverEvent(evt) {
+    if (this.isPopoverVisible && !evt.composedPath().includes(this)) {
+      this.toggleHide();
+    }
   }
 
   // function that renders the HTML and CSS into  the scope of the component