Skip to content

Commit 9d7b291

Browse files
fix(menu): submenus will open correctly on click
PiperOrigin-RevId: 523796693
1 parent 9c202f5 commit 9d7b291

File tree

5 files changed

+13
-9
lines changed

5 files changed

+13
-9
lines changed

list/lib/listitem/list-item.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ export class ListItemEl extends LitElement implements ListItem {
105105
* so that we have control over focus on specific variants such as disabling
106106
* focus on <md-autocomplete-item> but enabling it for <md-menu-item>.
107107
*/
108-
protected focusOnSelection = true;
108+
protected focusOnActivation = true;
109109

110110
protected getRipple = () => {
111111
this.showRipple = true;
@@ -119,7 +119,7 @@ export class ListItemEl extends LitElement implements ListItem {
119119
if (this.active) {
120120
this.itemTabIndex = 0;
121121

122-
if (this.focusOnSelection) {
122+
if (this.focusOnActivation) {
123123
this.showFocusRing = shouldShowStrongFocus();
124124
}
125125

@@ -274,7 +274,7 @@ export class ListItemEl extends LitElement implements ListItem {
274274
// will focus the list item root if it is selected but not on the first
275275
// update or else it may cause the page to jump on first load.
276276
if (changed.has('active') && !this.isFirstUpdate && this.active &&
277-
this.focusOnSelection) {
277+
this.focusOnActivation) {
278278
this.focus();
279279
}
280280

menu/lib/menu.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ export abstract class Menu extends LitElement {
133133
*/
134134
@ariaProperty
135135
@property({attribute: 'data-role', noAccessor: true})
136-
override role: ARIARole = 'list';
136+
override role: ARIARole = 'menu';
137137
/**
138138
* The max time between the keystrokes of the typeahead menu behavior before
139139
* it clears the typeahead buffer.
@@ -664,6 +664,7 @@ export abstract class Menu extends LitElement {
664664
const items = this.items;
665665
for (const item of items) {
666666
item.active = false;
667+
item.selected = false;
667668
}
668669
}
669670

menu/lib/shared.ts

+6-2
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,14 @@ interface MenuItemSelf {
1515
*/
1616
headline: string;
1717
/**
18-
* Whether or not the item is in the selected visual state (focuses on
19-
* selection).
18+
* Whether or not the item is the currently active item of interest (focuses
19+
* upon activation).
2020
*/
2121
active: boolean;
22+
/**
23+
* Whether or not the item is in the selected visual state.
24+
*/
25+
selected?: boolean;
2226
/**
2327
* If it is a sub-menu-item, a method that can close the submenu.
2428
*/

menu/lib/submenuitem/sub-menu-item.ts

-1
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,6 @@ export class SubMenuItem extends MenuItemEl {
217217
// around the menu and then mouses over an md-sub-menu.
218218
this.dispatchEvent(new DeactivateItemsEvent());
219219
this.dispatchEvent(new DeactivateTypeaheadEvent());
220-
this.active = true;
221220
this.selected = true;
222221

223222
// This is the case of mouse hovering when already opened via keyboard or

select/lib/selectoption/select-option.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export class SelectOptionEl extends MenuItemEl implements SelectOption {
4242
// By default active = true focuses the element. We want to prevent that
4343
// in this case because we set active = this.selected and that may mess
4444
// around with menu's restore focus function once the menu closes.
45-
this.focusOnSelection = false;
45+
this.focusOnActivation = false;
4646
}
4747

4848
super.willUpdate(changed);
@@ -52,7 +52,7 @@ export class SelectOptionEl extends MenuItemEl implements SelectOption {
5252
super.updated(changed);
5353
// Restore the active = true focusing behavior which happens in
5454
// super.updated() if it was turned off.
55-
this.focusOnSelection = true;
55+
this.focusOnActivation = true;
5656

5757
// Do not dispatch event on first update / boot-up.
5858
if (changed.has('selected') && changed.get('selected') !== undefined) {

0 commit comments

Comments
 (0)