mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 01:20:23 +03:00
fix(menu): fix submenus on mobile
PiperOrigin-RevId: 563531654
This commit is contained in:
parent
0211944b7e
commit
368991ce30
@ -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);
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user