fix(cdk/menu): nested menus requiring two taps to open touch devices (#27586)

The CDK menu supports opening a nested menu by hover, but the problem is that touch devices dispatch fake `mouseenter` events which end up closing the menu immediately. These changes add some logic to ignore such events.

Fixes #27508.

(cherry picked from commit d190e87)

Author: crisbeto

src/cdk/menu/menu-item.ts

@@ -17,7 +17,7 @@ import {
   Output,
 } from '@angular/core';
 import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
-import {FocusableOption} from '@angular/cdk/a11y';
+import {FocusableOption, InputModalityDetector} from '@angular/cdk/a11y';
 import {ENTER, hasModifierKey, LEFT_ARROW, RIGHT_ARROW, SPACE} from '@angular/cdk/keycodes';
 import {Directionality} from '@angular/cdk/bidi';
 import {fromEvent, Subject} from 'rxjs';
@@ -53,6 +53,7 @@ export class CdkMenuItem implements FocusableOption, FocusableElement, Toggler,
   protected readonly _dir = inject(Directionality, {optional: true});
   readonly _elementRef: ElementRef<HTMLElement> = inject(ElementRef);
   protected _ngZone = inject(NgZone);
+  private readonly _inputModalityDetector = inject(InputModalityDetector);
 
   /** The menu aim service used by this menu. */
   private readonly _menuAim = inject(MENU_AIM, {optional: true});
@@ -276,7 +277,14 @@ export class CdkMenuItem implements FocusableOption, FocusableElement, Toggler,
       this._ngZone.runOutsideAngular(() =>
         fromEvent(this._elementRef.nativeElement, 'mouseenter')
           .pipe(
-            filter(() => !this._menuStack.isEmpty() && !this.hasMenu),
+            filter(() => {
+              return (
+                // Skip fake `mouseenter` events dispatched by touch devices.
+                this._inputModalityDetector.mostRecentModality !== 'touch' &&
+                !this._menuStack.isEmpty() &&
+                !this.hasMenu
+              );
+            }),
             takeUntil(this.destroyed),
           )
           .subscribe(() => {

src/cdk/menu/menu-trigger.ts

@@ -7,6 +7,7 @@
  */
 
 import {Directive, ElementRef, inject, NgZone, OnDestroy} from '@angular/core';
+import {InputModalityDetector} from '@angular/cdk/a11y';
 import {Directionality} from '@angular/cdk/bidi';
 import {
   ConnectedPosition,
@@ -69,6 +70,7 @@ export class CdkMenuTrigger extends CdkMenuTriggerBase implements OnDestroy {
   private readonly _elementRef: ElementRef<HTMLElement> = inject(ElementRef);
   private readonly _overlay = inject(Overlay);
   private readonly _ngZone = inject(NgZone);
+  private readonly _inputModalityDetector = inject(InputModalityDetector);
   private readonly _directionality = inject(Directionality, {optional: true});
 
   /** The parent menu this trigger belongs to. */
@@ -195,7 +197,14 @@ export class CdkMenuTrigger extends CdkMenuTriggerBase implements OnDestroy {
     this._ngZone.runOutsideAngular(() => {
       fromEvent(this._elementRef.nativeElement, 'mouseenter')
         .pipe(
-          filter(() => !this.menuStack.isEmpty() && !this.isOpen()),
+          filter(() => {
+            return (
+              // Skip fake `mouseenter` events dispatched by touch devices.
+              this._inputModalityDetector.mostRecentModality !== 'touch' &&
+              !this.menuStack.isEmpty() &&
+              !this.isOpen()
+            );
+          }),
           takeUntil(this.destroyed),
         )
         .subscribe(() => {