fix(hover): move hover timeout to be controlled by menu items to fine…

…r control This fixes a bug causing menus to close and reopen depending on the situation
NickDJM · Jun 20, 2024 · 162a889 · 162a889
1 parent 7fd6796
commit 162a889
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 16 deletions.
diff --git a/src/_baseMenu.js b/src/_baseMenu.js
@@ -214,15 +214,6 @@ class BaseMenu {
    */
   _leaveDelay = -1;
 
-  /**
-   * A variable to hold the hover timeout function.
-   *
-   * @protected
-   *
-   * @type {?Function}
-   */
-  _hoverTimeout = null;
-
   /**
    * An array of error messages generated by the menu.
    *
@@ -1228,7 +1219,8 @@ class BaseMenu {
 
           if (menuItem.isSubmenuItem) {
             if (this.enterDelay > 0) {
-              this._hoverTimeout = setTimeout(() => {
+              clearTimeout(menuItem.hoverTimeout);
+              menuItem.hoverTimeout = setTimeout(() => {
                 menuItem.elements.toggle.preview();
               }, this.enterDelay);
             } else {
@@ -1254,7 +1246,8 @@ class BaseMenu {
             this.focusCurrentChild();
 
             if (this.enterDelay > 0) {
-              this._hoverTimeout = setTimeout(() => {
+              clearTimeout(menuItem.hoverTimeout);
+              menuItem.hoverTimeout = setTimeout(() => {
                 menuItem.elements.toggle.preview();
               }, this.enterDelay);
             } else {
@@ -1273,8 +1266,8 @@ class BaseMenu {
 
           if (this.hoverType === "on") {
             if (this.leaveDelay > 0) {
-              clearTimeout(this._hoverTimeout);
-              this._hoverTimeout = setTimeout(() => {
+              clearTimeout(menuItem.hoverTimeout);
+              menuItem.hoverTimeout = setTimeout(() => {
                 this.currentEvent = "mouse";
                 menuItem.elements.toggle.close();
               }, this.leaveDelay);
@@ -1285,8 +1278,8 @@ class BaseMenu {
           } else if (this.hoverType === "dynamic") {
             if (!this.isTopLevel) {
               if (this.leaveDelay > 0) {
-                clearTimeout(this._hoverTimeout);
-                this._hoverTimeout = setTimeout(() => {
+                clearTimeout(menuItem.hoverTimeout);
+                menuItem.hoverTimeout = setTimeout(() => {
                   this.currentEvent = "mouse";
                   menuItem.elements.toggle.close();
                   this.focusCurrentChild();
@@ -1312,7 +1305,7 @@ class BaseMenu {
             (this.hoverType === "on" || this.hoverType === "dynamic") &&
             this.leaveDelay > 0
           ) {
-            clearTimeout(this._hoverTimeout);
+            clearTimeout(menuItem.hoverTimeout);
           }
         });
       }

diff --git a/src/_baseMenuItem.js b/src/_baseMenuItem.js
@@ -1,6 +1,8 @@
 // eslint-disable-next-line no-unused-vars
 /* global BaseMenu, BaseMenuToggle */
 
+import { isValidType } from "./validate.js";
+
 /**
  * A basic navigation link contained inside of a BaseMenu.
  */
@@ -46,6 +48,15 @@ class BaseMenuItem {
    */
   _submenu = false;
 
+  /**
+   * A variable to hold the hover timeout function.
+   *
+   * @protected
+   *
+   * @type {?Function}
+   */
+  _hoverTimeout = null;
+
   /**
    * Constructs a new `BaseMenuItem`.
    *
@@ -121,6 +132,23 @@ class BaseMenuItem {
     return this._submenu;
   }
 
+  /**
+   * A variable to hold the hover timeout function.
+   *
+   * @type {?Function}
+   *
+   * @see _hoverTimeout
+   */
+  get hoverTimeout() {
+    return this._hoverTimeout;
+  }
+
+  set hoverTimeout(value) {
+    isValidType("function", { value });
+
+    this._hoverTimeout = value;
+  }
+
   /**
    * Focuses the menu item's link if the parent menu's
    * shouldFocus value is `true`.