fix: handle touch device submenu interactions

Author: Shipra Gupta

packages/menu/src/MenuItem.ts

@@ -13,7 +13,6 @@
 import {
     CSSResultArray,
     html,
-    INPUT_COMPONENT_PATTERN,
     nothing,
     PropertyValues,
     TemplateResult,
@@ -181,6 +180,8 @@ export class MenuItem extends LikeAnchor(
         return this._value || this.itemText;
     }
 
+    private _lastPointerType?: string;
+
     public set value(value: string) {
         if (value === this._value) {
             return;
@@ -457,124 +458,15 @@ export class MenuItem extends LikeAnchor(
         }
     }
 
-    private handlePointerdown(event: PointerEvent): void {
-        if (event.target === this && this.hasSubmenu && this.open) {
-            this.addEventListener('focus', this.handleSubmenuFocus, {
-                once: true,
-            });
-            this.overlayElement.addEventListener(
-                'beforetoggle',
-                this.handleBeforetoggle
-            );
-        }
-    }
-
     protected override firstUpdated(changes: PropertyValues): void {
         super.firstUpdated(changes);
         this.setAttribute('tabindex', '-1');
         this.addEventListener('keydown', this.handleKeydown);
-        this.addEventListener('mouseover', this.handleMouseover);
-        this.addEventListener('pointerdown', this.handlePointerdown);
-        this.addEventListener('pointerenter', this.closeOverlaysForRoot);
         if (!this.hasAttribute('id')) {
             this.id = `sp-menu-item-${randomID()}`;
         }
     }
 
-    private getActiveElementSafely(): HTMLElement | null {
-        let root = this.getRootNode() as Document | ShadowRoot;
-        let activeElement = root.activeElement as HTMLElement;
-
-        // If no active element in current context and we're in shadow DOM,
-        // traverse up to find the document-level active element
-        if (!activeElement && root !== document) {
-            while (root && root !== document && 'host' in root) {
-                root = (root as ShadowRoot).host.getRootNode() as
-                    | Document
-                    | ShadowRoot;
-                activeElement = root.activeElement as HTMLElement;
-                if (activeElement) break;
-            }
-        }
-
-        return activeElement;
-    }
-
-    handleMouseover(event: MouseEvent): void {
-        const target = event.target as HTMLElement;
-        if (target === this) {
-            // Check for active input elements across shadow boundaries
-            const activeElement = this.getActiveElementSafely();
-
-            // Only focus this menu item if no input element is currently active
-            // This prevents interrupting user input in search boxes, text fields, etc.
-            if (!activeElement || !this.isInputElement(activeElement)) {
-                this.focus();
-            }
-            this.focused = false;
-        }
-    }
-
-    /**
-     * Determines if an element is an input field that should retain focus.
-     * Uses multiple detection strategies to identify input elements generically.
-     */
-    private isInputElement(element: HTMLElement): boolean {
-        // Check for native HTML input elements
-        if (this.isNativeInputElement(element)) {
-            return true;
-        }
-
-        // Check for contenteditable elements (rich text editors)
-        if (element.contentEditable === 'true') {
-            return true;
-        }
-
-        // Check for Spectrum Web Components with input-like behavior
-        if (this.isSpectrumInputComponent(element)) {
-            return true;
-        }
-
-        return false;
-    }
-
-    /**
-     * Checks if an element is a native HTML input element.
-     */
-    private isNativeInputElement(element: HTMLElement): boolean {
-        return (
-            element instanceof HTMLInputElement ||
-            element instanceof HTMLTextAreaElement ||
-            element instanceof HTMLSelectElement
-        );
-    }
-
-    /**
-     * Checks if an element is a Spectrum Web Component with input behavior.
-     * Uses ARIA roles and component patterns for generic detection.
-     */
-    private isSpectrumInputComponent(element: HTMLElement): boolean {
-        // Check if it's a Spectrum Web Component
-        if (!element.tagName.startsWith('SP-')) {
-            return false;
-        }
-
-        // Check ARIA role for input-like behavior
-        const role = element.getAttribute('role');
-        const inputRoles = ['textbox', 'searchbox', 'combobox', 'slider'];
-        if (role && inputRoles.includes(role)) {
-            return true;
-        }
-
-        // Check for components that typically contain input elements
-        // This covers components like sp-search, sp-textfield, sp-number-field, etc.
-        const inputComponentPattern = INPUT_COMPONENT_PATTERN;
-        if (inputComponentPattern.test(element.tagName)) {
-            return true;
-        }
-
-        return false;
-    }
     /**
      * forward key info from keydown event to parent menu
      */
@@ -595,8 +487,8 @@ export class MenuItem extends LikeAnchor(
     };
 
     protected closeOverlaysForRoot(): void {
-        if (this.open) return;
-        this.menuData.parentMenu?.closeDescendentOverlays();
+        // if (this.open) return;
+        // this.menuData.parentMenu?.closeDescendentOverlays();
     }
 
     protected handleFocus(event: FocusEvent): void {
@@ -613,11 +505,25 @@ export class MenuItem extends LikeAnchor(
         }
     }
 
-    protected handleSubmenuClick(event: Event): void {
+    protected handleSubmenuTriggerClick(event: Event): void {
         if (event.composedPath().includes(this.overlayElement)) {
             return;
         }
-        this.openOverlay(true);
+
+        // If submenu is already open, toggle it closed
+        if (this.open && this._lastPointerType === 'touch') {
+            event.preventDefault();
+            event.stopPropagation(); // Don't let parent menu handle this
+            this.open = false;
+            return;
+        }
+
+        // All: open if closed
+        if (!this.open) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            this.openOverlay(true);
+        }
     }
 
     protected handleSubmenuFocus(): void {
@@ -640,7 +546,19 @@ export class MenuItem extends LikeAnchor(
         }
     };
 
-    protected handlePointerenter(): void {
+    protected handlePointerenter(event: PointerEvent): void {
+        this._lastPointerType = event.pointerType; // Track pointer type
+
+        // For touch: don't handle pointerenter, let click handle it
+        if (event.pointerType === 'touch') {
+            return;
+        }
+
+        // Close other submenus (from closeOverlaysForRoot)
+        if (!this.open) {
+            this.menuData.parentMenu?.closeDescendentOverlays();
+        }
+
         if (this.leaveTimeout) {
             clearTimeout(this.leaveTimeout);
             delete this.leaveTimeout;
@@ -654,7 +572,14 @@ export class MenuItem extends LikeAnchor(
     protected leaveTimeout?: ReturnType<typeof setTimeout>;
     protected recentlyLeftChild = false;
 
-    protected handlePointerleave(): void {
+    protected handlePointerleave(event: PointerEvent): void {
+        this._lastPointerType = event.pointerType; // Update on leave too
+
+        // For touch: don't handle pointerleave, let click handle it
+        if (event.pointerType === 'touch') {
+            return;
+        }
+
         this._closedViaPointer = true;
         if (this.open && !this.recentlyLeftChild) {
             this.leaveTimeout = setTimeout(() => {
@@ -782,7 +707,7 @@ export class MenuItem extends LikeAnchor(
                 const options = { signal: this.abortControllerSubmenu.signal };
                 this.addEventListener(
                     'click',
-                    this.handleSubmenuClick,
+                    this.handleSubmenuTriggerClick,
                     options
                 );
                 this.addEventListener(