mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +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}
|
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);
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user