From 9d7b2910d721bf43fac80fa0c909d0ddbc951852 Mon Sep 17 00:00:00 2001
From: Material Web Team <material-web-copybara@google.com>
Date: Wed, 12 Apr 2023 13:53:20 -0700
Subject: [PATCH] fix(menu): submenus will open correctly on click

PiperOrigin-RevId: 523796693
---
 list/lib/listitem/list-item.ts           | 6 +++---
 menu/lib/menu.ts                         | 3 ++-
 menu/lib/shared.ts                       | 8 ++++++--
 menu/lib/submenuitem/sub-menu-item.ts    | 1 -
 select/lib/selectoption/select-option.ts | 4 ++--
 5 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/list/lib/listitem/list-item.ts b/list/lib/listitem/list-item.ts
index d7998f883f..e77335fcfa 100644
--- a/list/lib/listitem/list-item.ts
+++ b/list/lib/listitem/list-item.ts
@@ -105,7 +105,7 @@ export class ListItemEl extends LitElement implements ListItem {
    * so that we have control over focus on specific variants such as disabling
    * focus on <md-autocomplete-item> but enabling it for <md-menu-item>.
    */
-  protected focusOnSelection = true;
+  protected focusOnActivation = true;
 
   protected getRipple = () => {
     this.showRipple = true;
@@ -119,7 +119,7 @@ export class ListItemEl extends LitElement implements ListItem {
       if (this.active) {
         this.itemTabIndex = 0;
 
-        if (this.focusOnSelection) {
+        if (this.focusOnActivation) {
           this.showFocusRing = shouldShowStrongFocus();
         }
 
@@ -274,7 +274,7 @@ export class ListItemEl extends LitElement implements ListItem {
     // will focus the list item root if it is selected but not on the first
     // update or else it may cause the page to jump on first load.
     if (changed.has('active') && !this.isFirstUpdate && this.active &&
-        this.focusOnSelection) {
+        this.focusOnActivation) {
       this.focus();
     }
 
diff --git a/menu/lib/menu.ts b/menu/lib/menu.ts
index e5e8cf325b..107ef6629a 100644
--- a/menu/lib/menu.ts
+++ b/menu/lib/menu.ts
@@ -133,7 +133,7 @@ export abstract class Menu extends LitElement {
    */
   @ariaProperty
   @property({attribute: 'data-role', noAccessor: true})
-  override role: ARIARole = 'list';
+  override role: ARIARole = 'menu';
   /**
    * The max time between the keystrokes of the typeahead menu behavior before
    * it clears the typeahead buffer.
@@ -664,6 +664,7 @@ export abstract class Menu extends LitElement {
     const items = this.items;
     for (const item of items) {
       item.active = false;
+      item.selected = false;
     }
   }
 
diff --git a/menu/lib/shared.ts b/menu/lib/shared.ts
index 4be169d942..11fb36eb74 100644
--- a/menu/lib/shared.ts
+++ b/menu/lib/shared.ts
@@ -15,10 +15,14 @@ interface MenuItemSelf {
    */
   headline: string;
   /**
-   * Whether or not the item is in the selected visual state (focuses on
-   * selection).
+   * Whether or not the item is the currently active item of interest (focuses
+   * upon activation).
    */
   active: boolean;
+  /**
+   * Whether or not the item is in the selected visual state.
+   */
+  selected?: boolean;
   /**
    * If it is a sub-menu-item, a method that can close the submenu.
    */
diff --git a/menu/lib/submenuitem/sub-menu-item.ts b/menu/lib/submenuitem/sub-menu-item.ts
index be4633b619..b917caa0b7 100644
--- a/menu/lib/submenuitem/sub-menu-item.ts
+++ b/menu/lib/submenuitem/sub-menu-item.ts
@@ -217,7 +217,6 @@ export class SubMenuItem extends MenuItemEl {
     // around the menu and then mouses over an md-sub-menu.
     this.dispatchEvent(new DeactivateItemsEvent());
     this.dispatchEvent(new DeactivateTypeaheadEvent());
-    this.active = true;
     this.selected = true;
 
     // This is the case of mouse hovering when already opened via keyboard or
diff --git a/select/lib/selectoption/select-option.ts b/select/lib/selectoption/select-option.ts
index 73e4cc3da5..5bed9f9492 100644
--- a/select/lib/selectoption/select-option.ts
+++ b/select/lib/selectoption/select-option.ts
@@ -42,7 +42,7 @@ export class SelectOptionEl extends MenuItemEl implements SelectOption {
       // By default active = true focuses the element. We want to prevent that
       // in this case because we set active = this.selected and that may mess
       // around with menu's restore focus function once the menu closes.
-      this.focusOnSelection = false;
+      this.focusOnActivation = false;
     }
 
     super.willUpdate(changed);
@@ -52,7 +52,7 @@ export class SelectOptionEl extends MenuItemEl implements SelectOption {
     super.updated(changed);
     // Restore the active = true focusing behavior which happens in
     // super.updated() if it was turned off.
-    this.focusOnSelection = true;
+    this.focusOnActivation = true;
 
     // Do not dispatch event on first update / boot-up.
     if (changed.has('selected') && changed.get('selected') !== undefined) {