refactor: simplify controller and menu-bar deactivation

Author: DiegoCardoso

packages/context-menu/src/vaadin-safe-triangle-controller.d.ts

@@ -17,7 +17,7 @@ export class SafeTriangleController {
    * Activate the safe triangle tracking for the given submenu overlay.
    * Should be called when a submenu opens.
    */
-  activate(submenuOverlay: HTMLElement, parentItem: HTMLElement): void;
+  activate(submenuOverlay: HTMLElement, parentItem: HTMLElement, parentContainer?: HTMLElement): void;
 
   /**
    * Deactivate the safe triangle tracking.

packages/context-menu/src/vaadin-safe-triangle-controller.js

@@ -26,16 +26,12 @@ const FALLBACK_TIMEOUT_MS = 400;
  * - Only active for pointer/mouse input; ignored for touch and pen
  */
 export class SafeTriangleController {
-  #hasLastPosition = false;
-
   #lastX = 0;
 
   #lastY = 0;
 
   #invalidCount = 0;
 
-  #active = false;
-
   #lastMoveTime = 0;
 
   #submenuElement = null;
@@ -58,17 +54,17 @@ export class SafeTriangleController {
     if (now - this.#lastMoveTime < THROTTLE_MS) {
       return;
     }
-    this.#lastMoveTime = now;
 
     const x = event.clientX;
     const y = event.clientY;
 
-    if (!this.#hasLastPosition) {
-      this.#hasLastPosition = true;
+    if (this.#lastMoveTime === 0) {
+      this.#lastMoveTime = now;
       this.#lastX = x;
       this.#lastY = y;
       return;
     }
+    this.#lastMoveTime = now;
 
     if (!this.#submenuElement) {
       this.#lastX = x;
@@ -139,11 +135,11 @@ export class SafeTriangleController {
    */
   activate(submenuOverlay, parentItem, parentContainer) {
     this.#cancelPendingSwitch();
+    const wasActive = this.#submenuElement !== null;
     this.#submenuElement = submenuOverlay;
     this.#parentItemElement = parentItem;
     this.#invalidCount = 0;
     this.#lastMoveTime = 0;
-    this.#hasLastPosition = false;
     this.#lastX = 0;
     this.#lastY = 0;
 
@@ -155,8 +151,7 @@ export class SafeTriangleController {
       parentContainer.setAttribute('safe-triangle-active', '');
     }
 
-    if (!this.#active) {
-      this.#active = true;
+    if (!wasActive) {
       document.addEventListener('pointermove', this.#onPointerMove);
     }
   }
@@ -170,8 +165,7 @@ export class SafeTriangleController {
       this.#parentContainer.removeAttribute('safe-triangle-active');
       this.#parentContainer = null;
     }
-    if (this.#active) {
-      this.#active = false;
+    if (this.#submenuElement) {
       document.removeEventListener('pointermove', this.#onPointerMove);
     }
     this.#submenuElement = null;
@@ -187,7 +181,7 @@ export class SafeTriangleController {
    * @return {boolean}
    */
   shouldKeepOpen() {
-    if (!this.#active || !this.#submenuElement) {
+    if (!this.#submenuElement) {
       return false;
     }
     // Only block switches if we've actually tracked pointer movement.
@@ -215,18 +209,15 @@ export class SafeTriangleController {
   }
 
   #cancelPendingSwitch() {
-    this.#pendingSwitch = null;
-    if (this.#pendingTimeout) {
-      clearTimeout(this.#pendingTimeout);
-      this.#pendingTimeout = null;
-    }
-  }
-
-  #executePendingSwitch() {
     const callback = this.#pendingSwitch;
     this.#pendingSwitch = null;
     clearTimeout(this.#pendingTimeout);
     this.#pendingTimeout = null;
+    return callback;
+  }
+
+  #executePendingSwitch() {
+    const callback = this.#cancelPendingSwitch();
     if (callback) {
       callback();
     }

packages/menu-bar/src/vaadin-menu-bar-mixin.js

@@ -285,6 +285,11 @@ export const MenuBarMixin = (superClass) =>
 
           menu.addEventListener('item-selected', this.__onItemSelected.bind(this));
           menu.addEventListener('close-all-menus', this.__onEscapeClose.bind(this));
+          menu.addEventListener('opened-changed', (e) => {
+            if (!e.detail.value && this.__safeTriangle) {
+              this.__safeTriangle.deactivate();
+            }
+          });
 
           const overlay = menu._overlayElement;
           overlay._contentRoot.addEventListener('keydown', this.__boundOnContextMenuKeydown);
@@ -1059,9 +1064,6 @@ export const MenuBarMixin = (superClass) =>
     /** @private */
     __onEscapeClose() {
       this.__deactivateButton(true);
-      if (this.__safeTriangle) {
-        this.__safeTriangle.deactivate();
-      }
     }
 
     /** @private */
@@ -1087,10 +1089,6 @@ export const MenuBarMixin = (superClass) =>
       if (this._subMenu.opened) {
         this._subMenu.close();
       }
-      // Deactivate safe triangle tracking when submenu closes
-      if (this.__safeTriangle) {
-        this.__safeTriangle.deactivate();
-      }
     }
 
     /**