bug(CdkMenu): Opening submenu requires two clicks on touch display (Chrome)

[diegoadolf]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When opening a submenu created using CdkMenu via touch interaction on a touch display, the first click on the CdkMenuItem does not open the corresponding submenu. Only the second click opens the submenu.

This can be reproduced on Chrome (v115 - latest as of 2023-07-25) on both macOs and Windows 10.

Reproduction

Example on the Angular CDK website: https://material.angular.io/cdk/menu/examples#cdk-menu-menubar

1. using a touch display or touch emulation on Chrome, click on the parent menu item "File".
2. click on the submenu item "New"
3. you will see that the menu item is briefly animated, but the menu does not open
4. click the "New" menu item again and the submenu will open.

Issue can be reproduced on the Angular CDK website or the StackBlitz link provided in the example

Video showing the bug:
https://github.com/angular/components/assets/6468359/0b9dff7a-68e1-49cc-96fd-0d887e4e704c

Expected Behavior

Only one click should be necessary to open the submenu using touch interaction on a touch display.

Actual Behavior

Two clicks are necessary to open the submenu.

Environment

• Angular: 16.1.1
• CDK/Material: 16.1.5
• Browser(s): Chrome Version 115.0.5790.102 (Official Build) (x86_64) (latest as of 2023-07-25)
• Operating System (e.g. Windows, macOS, Ubuntu): Microsoft Windows 10 Pro (Version 10.0.19045 Build 19045), macOS Monterey (Version 12.6.3 (21G419))

[diegoadolf]

Video showing the bug:
https://github.com/angular/components/assets/6468359/0b9dff7a-68e1-49cc-96fd-0d887e4e704c

[crisbeto]

It's worth noting that this doesn't seem to happen on a device.

[netstal-tsp]

Bug is reproducible on a Samsung Galaxy 10 with Android 12 and Chrome 114.5735.196

[diegoadolf]

I have debugged the issue and have the following findings:
When interacting via touch, Chrome triggers a mouseenter event before the click event is fired. The registered mouseenter event opens the menu, and the click handler subsequently toggles the menu, effectively closing it.

Below you find a diff with a suggested fix. The fix changes the mouseenter listener to a pointerenter listener. The event is then filtered by pointerType, ignoring all events originating from any input device other than mouse.
From what I could gather, navigating menus by dragging a touch point (touch/pen) is currently not a feature, so I don't expect any side effects.

I hope this helps. I am glad to assist in further fixing the issue.

Index: src/cdk/menu/menu-trigger.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/src/cdk/menu/menu-trigger.ts b/src/cdk/menu/menu-trigger.ts
--- a/src/cdk/menu/menu-trigger.ts	(revision 0c4f947cdf511750b2e62f793e23b6bcc5678ab5)
+++ b/src/cdk/menu/menu-trigger.ts	(date 1690536865336)
@@ -82,7 +82,7 @@
     this._setRole();
     this._registerCloseHandler();
     this._subscribeToMenuStackClosed();
-    this._subscribeToMouseEnter();
+    this._subscribeToPointerEnter();
     this._subscribeToMenuStackHasFocus();
     this._setType();
   }
@@ -188,14 +188,24 @@
   }
 
   /**
-   * Subscribe to the mouseenter events and close any sibling menu items if this element is moused
+   * Subscribe to the pointerenter events and close any sibling menu items if this element is moused
    * into.
    */
-  private _subscribeToMouseEnter() {
+  private _subscribeToPointerEnter() {
     this._ngZone.runOutsideAngular(() => {
-      fromEvent(this._elementRef.nativeElement, 'mouseenter')
+      fromEvent<PointerEvent>(this._elementRef.nativeElement, 'pointerenter')
         .pipe(
-          filter(() => !this.menuStack.isEmpty() && !this.isOpen()),
+          filter((pointerEvent) => {
+            // Ignore pointerenter events from devices other than mouse (e.g. touch or pen) that can
+            // be triggered by certain browsers (e.g Chrome v115) when clicking via touch.
+            // Otherwise, the menu will be toggled once by this event and subsequently by the
+            // click event. This will effectively cause the menu to close right after it opens.
+            // Dragging the touch point to navigate the menu is currently not a feature, and thus
+            // filtering pointerType === 'mouse' should not have side effects.
+            return !this.menuStack.isEmpty()
+              && !this.isOpen()
+              && pointerEvent.pointerType === 'mouse';
+          }),
           takeUntil(this.destroyed),
         )
         .subscribe(() => {