material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-09-11 13:46:10 +03:00
Code Issues Projects Releases Wiki Activity

fix(menu): fix submenus on mobile

Browse Source 
PiperOrigin-RevId: 563531654
This commit is contained in:
Elliott Marquez 2023-09-07 13:38:42 -07:00 committed by Copybara-Service
parent 0211944b7e
commit 368991ce30
2 changed files with 37 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
list/internal/listitem/list-item.ts
View File

@ -162,8 +162,8 @@ export class ListItemEl extends LitElement implements ListItem {
href=${this.href || nothing} href=${this.href || nothing}
target=${target} target=${target}
@click=${this.onClick} @click=${this.onClick}
@pointerenter=${this.onPointerenter} @mouseenter=${this.onMouseenter}
@pointerleave=${this.onPointerleave} @mouseleave=${this.onMouseleave}
@keydown=${this.onKeydown} @keydown=${this.onKeydown}
>${content}</${tag}> >${content}</${tag}>
`; `;
@ -265,8 +265,8 @@ export class ListItemEl extends LitElement implements ListItem {
// For easier overriding in menu-item // For easier overriding in menu-item
protected onClick?(event: Event): void; protected onClick?(event: Event): void;
protected onKeydown?(event: KeyboardEvent): void; protected onKeydown?(event: KeyboardEvent): void;
protected onPointerenter?(event: Event): void; protected onMouseenter?(event: Event): void;
protected onPointerleave?(event: Event): void; protected onMouseleave?(event: Event): void;
protected override updated(changed: PropertyValues<this>) { protected override updated(changed: PropertyValues<this>) {
super.updated(changed); super.updated(changed);

40
menu/internal/submenuitem/sub-menu-item.ts
View File

@ -31,7 +31,7 @@ export class SubMenuItem extends MenuItemEl {
*/ */
@property({attribute: 'menu-corner'}) menuCorner: Corner = 'START_START'; @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; @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. * 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.previousOpenTimeout);
clearTimeout(this.previousCloseTimeout); clearTimeout(this.previousCloseTimeout);
if (this.submenuEl?.open) return; if (this.submenuEl?.open) return;
@ -80,8 +86,14 @@ export class SubMenuItem extends MenuItemEl {
/** /**
* Starts the default 400ms countdown to close the submenu. * 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.previousCloseTimeout);
clearTimeout(this.previousOpenTimeout); clearTimeout(this.previousOpenTimeout);
@ -150,8 +162,8 @@ export class SubMenuItem extends MenuItemEl {
private renderSubMenu() { private renderSubMenu() {
return html`<span class="submenu"><slot return html`<span class="submenu"><slot
name="submenu" name="submenu"
@pointerenter=${this.onSubmenuPointerEnter} @mouseenter=${this.onSubmenuMouseEnter}
@pointerleave=${this.onSubmenuPointerLeave} @mouseleave=${this.onSubmenuMouseLeave}
@keydown=${this.onSubMenuKeydown} @keydown=${this.onSubMenuKeydown}
@close-menu=${this.onCloseSubmenu} @close-menu=${this.onCloseSubmenu}
></slot></span>`; ></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; 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; this.submenuHover = false;
} }
} }