material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-08-17 01:20:23 +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}
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);

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';
/**
* 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;
}
}