fix: improve touch interaction handling for submenus (#5867)

* fix: improve touch interaction handling for submenus

* chore: add changeset for menu touch interaction fix

* test: add comprehensive touch interaction tests for menu submenus

* fix(overlay): add null checks for window.__swc.warn in test environments

* fix(menu): correct PropertyValues check and improve touch event detection

* fix(menu): prevent duplicate pointerup listeners causing submenu to close and reopen

- Add _touchListenerActive flag to prevent multiple pointerup listeners from being registered
- Reset flag in handleTouchSubmenuToggle after action completes
- Prevents rapid close/reopen behavior when tapping on menu items with open submenus

* test(menu): improve test coverage for touch and pointer interactions

- Add click event dispatch after touch tap to cover handleSubmenuClick touch prevention
- Add touch pointerleave test to cover early return for touch devices
- Add test for pointerdown on open submenu followed by focus to cover handleSubmenuFocus

These targeted test enhancements improve coverage without adding entirely new test cases.

* refactor: resolve code review comments

* test: fix nested submenu touch interaction test

---------

Co-authored-by: Shipra Gupta <[email protected]>
Co-authored-by: Nikki Massaro <[email protected]>

Author: 3 people

.changeset/brave-foxes-smile.md

@@ -0,0 +1,5 @@
+---
+'@spectrum-web-components/menu': patch
+---
+
+**Fixed**: Improved touch interaction handling for submenus to prevent unintended submenu closures.

1st-gen/packages/menu/src/MenuItem.ts

@@ -320,6 +320,13 @@ export class MenuItem extends LikeAnchor(
      */
     private _closedViaPointer = false;
 
+    /**
+     * Touch interaction state for submenu toggling
+     */
+    private _activePointerId?: number;
+    private _touchHandledViaPointerup = false;
+    private _touchAbortController?: AbortController;
+
     private handleClickCapture(event: Event): void | boolean {
         if (this.disabled) {
             event.preventDefault();
@@ -458,17 +465,75 @@ export class MenuItem extends LikeAnchor(
     }
 
     private handlePointerdown(event: PointerEvent): void {
-        if (event.target === this && this.hasSubmenu && this.open) {
+        const path = event.composedPath();
+        const targetIsInOverlay =
+            this.overlayElement && path.includes(this.overlayElement);
+
+        if (
+            event.pointerType === 'touch' &&
+            this.hasSubmenu &&
+            !targetIsInOverlay &&
+            this._activePointerId === undefined
+        ) {
+            this._activePointerId = event.pointerId;
+            this._touchAbortController = new AbortController();
+
+            window.addEventListener(
+                'pointerup',
+                this.handleTouchSubmenuToggle,
+                { once: true, signal: this._touchAbortController.signal }
+            );
+            window.addEventListener('pointercancel', this.handleTouchCleanup, {
+                once: true,
+                signal: this._touchAbortController.signal,
+            });
+        }
+
+        if (
+            !targetIsInOverlay &&
+            this.hasSubmenu &&
+            this.open &&
+            event.pointerType !== 'touch'
+        ) {
             this.addEventListener('focus', this.handleSubmenuFocus, {
                 once: true,
             });
-            this.overlayElement.addEventListener(
+            this.overlayElement?.addEventListener(
                 'beforetoggle',
                 this.handleBeforetoggle
             );
         }
     }
 
+    private handleTouchSubmenuToggle = (event: PointerEvent): void => {
+        if (event.pointerId !== this._activePointerId) {
+            return;
+        }
+
+        this._touchAbortController?.abort();
+        this._touchHandledViaPointerup = true;
+        this._activePointerId = undefined;
+
+        if (this.open) {
+            this.open = false;
+        } else {
+            this.openOverlay();
+        }
+
+        setTimeout(() => {
+            this._touchHandledViaPointerup = false;
+        }, 0);
+    };
+
+    private handleTouchCleanup = (event: PointerEvent): void => {
+        if (event.pointerId !== this._activePointerId) {
+            return;
+        }
+        this._touchAbortController?.abort();
+        this._activePointerId = undefined;
+        this._touchHandledViaPointerup = false;
+    };
+
     protected override firstUpdated(changes: PropertyValues): void {
         super.firstUpdated(changes);
         this.setAttribute('tabindex', '-1');
@@ -614,9 +679,16 @@ export class MenuItem extends LikeAnchor(
     }
 
     protected handleSubmenuClick(event: Event): void {
+        if (this._touchHandledViaPointerup) {
+            event.stopPropagation();
+            event.preventDefault();
+            return;
+        }
+
         if (event.composedPath().includes(this.overlayElement)) {
             return;
         }
+
         this.openOverlay(true);
     }
 
@@ -640,7 +712,12 @@ export class MenuItem extends LikeAnchor(
         }
     };
 
-    protected handlePointerenter(): void {
+    protected handlePointerenter(event: PointerEvent): void {
+        // For touch devices, don't open on pointerenter - let click handle it
+        if (event.pointerType === 'touch') {
+            return;
+        }
+
         if (this.leaveTimeout) {
             clearTimeout(this.leaveTimeout);
             delete this.leaveTimeout;
@@ -654,7 +731,12 @@ export class MenuItem extends LikeAnchor(
     protected leaveTimeout?: ReturnType<typeof setTimeout>;
     protected recentlyLeftChild = false;
 
-    protected handlePointerleave(): void {
+    protected handlePointerleave(event: PointerEvent): void {
+        // For touch devices, don't close on pointerleave - let click handle it
+        if (event.pointerType === 'touch') {
+            return;
+        }
+
         this._closedViaPointer = true;
         if (this.open && !this.recentlyLeftChild) {
             this.leaveTimeout = setTimeout(() => {
@@ -821,6 +903,12 @@ export class MenuItem extends LikeAnchor(
             selectionRoot: undefined,
             cleanupSteps: [],
         };
+
+        // Clean up any active touch listeners
+        this._touchAbortController?.abort();
+        this._activePointerId = undefined;
+        this._touchHandledViaPointerup = false;
+
         super.disconnectedCallback();
     }