From 368991ce306e904959a5d53e49293a8a683c46a1 Mon Sep 17 00:00:00 2001
From: Elliott Marquez <emarquez@google.com>
Date: Thu, 7 Sep 2023 13:38:42 -0700
Subject: [PATCH] fix(menu): fix submenus on mobile

PiperOrigin-RevId: 563531654
---
 list/internal/listitem/list-item.ts        |  8 ++---
 menu/internal/submenuitem/sub-menu-item.ts | 40 ++++++++++++++++++----
 2 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/list/internal/listitem/list-item.ts b/list/internal/listitem/list-item.ts
index 226d9518a..975a98016 100644
--- a/list/internal/listitem/list-item.ts
+++ b/list/internal/listitem/list-item.ts
@@ -162,8 +162,8 @@ export class ListItemEl extends LitElement implements ListItem {
         href=${this.href || nothing}
         target=${target}
         @click=${this.onClick}
-        @pointerenter=${this.onPointerenter}
-        @pointerleave=${this.onPointerleave}
+        @mouseenter=${this.onMouseenter}
+        @mouseleave=${this.onMouseleave}
         @keydown=${this.onKeydown}
       >${content}</${tag}>
     `;
@@ -265,8 +265,8 @@ export class ListItemEl extends LitElement implements ListItem {
   // For easier overriding in menu-item
   protected onClick?(event: Event): void;
   protected onKeydown?(event: KeyboardEvent): void;
-  protected onPointerenter?(event: Event): void;
-  protected onPointerleave?(event: Event): void;
+  protected onMouseenter?(event: Event): void;
+  protected onMouseleave?(event: Event): void;
 
   protected override updated(changed: PropertyValues<this>) {
     super.updated(changed);
diff --git a/menu/internal/submenuitem/sub-menu-item.ts b/menu/internal/submenuitem/sub-menu-item.ts
index c427689a0..b4556503f 100644
--- a/menu/internal/submenuitem/sub-menu-item.ts
+++ b/menu/internal/submenuitem/sub-menu-item.ts
@@ -31,7 +31,7 @@ export class SubMenuItem extends MenuItemEl {
    */
   @property({attribute: 'menu-corner'}) menuCorner: Corner = 'START_START';
   /**
-   * The delay between pointerenter and submenu opening.
+   * The delay between mouseenter and submenu opening.
    */
   @property({type: Number, attribute: 'hover-open-delay'}) hoverOpenDelay = 400;
   /**
@@ -61,8 +61,14 @@ export class SubMenuItem extends MenuItemEl {
 
   /**
    * Starts the default 400ms countdown to open the submenu.
+   *
+   * NOTE: We explicitly use mouse events and not pointer events because
+   * pointer events apply to touch events. And if a user were to tap a
+   * sub-menu-item, it would fire the "pointerenter", "pointerleave", "click"
+   * events which would open the menu on click, and then set the timeout to
+   * close the menu due to pointerleave.
    */
-  protected override onPointerenter = () => {
+  protected override onMouseenter = () => {
     clearTimeout(this.previousOpenTimeout);
     clearTimeout(this.previousCloseTimeout);
     if (this.submenuEl?.open) return;
@@ -80,8 +86,14 @@ export class SubMenuItem extends MenuItemEl {
 
   /**
    * Starts the default 400ms countdown to close the submenu.
+   *
+   * NOTE: We explicitly use mouse events and not pointer events because
+   * pointer events apply to touch events. And if a user were to tap a
+   * sub-menu-item, it would fire the "pointerenter", "pointerleave", "click"
+   * events which would open the menu on click, and then set the timeout to
+   * close the menu due to pointerleave.
    */
-  protected override onPointerleave = () => {
+  protected override onMouseleave = () => {
     clearTimeout(this.previousCloseTimeout);
     clearTimeout(this.previousOpenTimeout);
 
@@ -150,8 +162,8 @@ export class SubMenuItem extends MenuItemEl {
   private renderSubMenu() {
     return html`<span class="submenu"><slot
         name="submenu"
-        @pointerenter=${this.onSubmenuPointerEnter}
-        @pointerleave=${this.onSubmenuPointerLeave}
+        @mouseenter=${this.onSubmenuMouseEnter}
+        @mouseleave=${this.onSubmenuMouseLeave}
         @keydown=${this.onSubMenuKeydown}
         @close-menu=${this.onCloseSubmenu}
     ></slot></span>`;
@@ -310,11 +322,25 @@ export class SubMenuItem extends MenuItemEl {
     }
   }
 
-  private onSubmenuPointerEnter() {
+  /**
+   * NOTE: We explicitly use mouse events and not pointer events because
+   * pointer events apply to touch events. And if a user were to tap a
+   * sub-menu-item, it would fire the "pointerenter", "pointerleave", "click"
+   * events which would open the menu on click, and then set the timeout to
+   * close the menu due to pointerleave.
+   */
+  private onSubmenuMouseEnter() {
     this.submenuHover = true;
   }
 
-  private onSubmenuPointerLeave() {
+  /**
+   * NOTE: We explicitly use mouse events and not pointer events because
+   * pointer events apply to touch events. And if a user were to tap a
+   * sub-menu-item, it would fire the "pointerenter", "pointerleave", "click"
+   * events which would open the menu on click, and then set the timeout to
+   * close the menu due to pointerleave.
+   */
+  private onSubmenuMouseLeave() {
     this.submenuHover = false;
   }
 }