Skip to content

fix(material/menu): remove dependency on animations module #30099

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

fix(material/menu): remove dependency on animations module #30099

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/material/menu/menu-animations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ import {
* Animation duration and timing values are based on:
* https://material.io/guidelines/components/menus.html#menus-usage
* @docs-private
* @deprecated No longer used, will be removed.
* @breaking-change 21.0.0
*/
export const matMenuAnimations: {
readonly transformMenu: AnimationTriggerMetadata;
Expand Down
11 changes: 5 additions & 6 deletions src/material/menu/menu-content.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import {
ViewContainerRef,
inject,
} from '@angular/core';
import {Subject} from 'rxjs';

/**
* Injection token that can be used to reference instances of `MatMenuContent`. It serves
Expand All @@ -41,11 +40,11 @@ export class MatMenuContent implements OnDestroy {
private _document = inject(DOCUMENT);
private _changeDetectorRef = inject(ChangeDetectorRef);

private _portal: TemplatePortal<any>;
private _portal: TemplatePortal<any> | undefined;
private _outlet: DomPortalOutlet;

/** Emits when the menu content has been attached. */
readonly _attached = new Subject<void>();
/** Number of times the content was attached. */
_attachCount = 0;

constructor(...args: unknown[]);

Expand Down Expand Up @@ -85,15 +84,15 @@ export class MatMenuContent implements OnDestroy {
// it needs to check for new menu items and update the `@ContentChild` in `MatMenu`.
this._changeDetectorRef.markForCheck();
this._portal.attach(this._outlet, context);
this._attached.next();
this._attachCount++;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like you jut increase this counter, but never decrease it.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's intentional, because if the content gets detached and re-attached to a different panel, it'll stay at 1.

}

/**
* Detaches the content.
* @docs-private
*/
detach() {
if (this._portal.isAttached) {
if (this._portal?.isAttached) {
this._portal.detach();
}
}
Expand Down
45 changes: 23 additions & 22 deletions src/material/menu/menu-trigger.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,7 +295,7 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
this._initMenu(menu);

if (menu instanceof MatMenu) {
menu._startAnimation();
menu._setIsOpen(true);
menu._directDescendantItems.changes.pipe(takeUntil(menu.close)).subscribe(() => {
// Re-adjust the position without locking when the amount of items
// changes so that the overlay is allowed to pick a new optimal position.
Expand Down Expand Up @@ -337,7 +337,6 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {

const menu = this.menu;
this._closingActionsSubscription.unsubscribe();
this._overlayRef.detach();

// Always restore focus if the user is navigating using the keyboard or the menu was opened
// programmatically. We don't restore for non-root triggers, because it can prevent focus
Expand All @@ -350,28 +349,30 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
this._openedBy = undefined;

if (menu instanceof MatMenu) {
menu._resetAnimation();

if (menu.lazyContent) {
// Wait for the exit animation to finish before detaching the content.
menu._animationDone
.pipe(
filter(event => event.toState === 'void'),
take(1),
// Interrupt if the content got re-attached.
takeUntil(menu.lazyContent._attached),
)
.subscribe({
next: () => menu.lazyContent!.detach(),
// No matter whether the content got re-attached, reset the menu.
complete: () => this._setIsMenuOpen(false),
});
} else {
this._setIsMenuOpen(false);
}
const attachCount = menu.lazyContent ? menu.lazyContent._attachCount : 0;

menu._animationDone
.pipe(
filter(state => state === 'void'),
take(1),
)
.subscribe({
complete: () => {
// Don't detach the lazy content if it got re-attached while the animation
// was running. It may have been attached to a different DOM node.
if (menu.lazyContent && menu.lazyContent._attachCount === attachCount) {
menu.lazyContent.detach();
}
this._overlayRef?.detach();
},
});

this._setIsMenuOpen(false);
menu._setIsOpen(false);
} else {
this._setIsMenuOpen(false);
menu?.lazyContent?.detach();
this._overlayRef.detach();
}
}

Expand All @@ -386,7 +387,7 @@ export class MatMenuTrigger implements AfterContentInit, OnDestroy {
this._setIsMenuOpen(true);
}

// set state rather than toggle to support triggers sharing a menu
/** Sets the current menu state. */
private _setIsMenuOpen(isOpen: boolean): void {
if (isOpen !== this._menuOpen) {
this._menuOpen = isOpen;
Expand Down
9 changes: 6 additions & 3 deletions src/material/menu/menu.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,15 @@
class="mat-mdc-menu-panel"
[id]="panelId"
[class]="_classList"
[class.mat-menu-panel-animations-disabled]="_animationsDisabled"
[class.mat-menu-panel-exit-animation]="_panelAnimationState === 'void'"
[class.mat-menu-panel-animating]="_isAnimating"
(click)="closed.emit('click')"
[@transformMenu]="_panelAnimationState"
(@transformMenu.start)="_onAnimationStart($event)"
(@transformMenu.done)="_onAnimationDone($event)"
tabindex="-1"
role="menu"
(animationstart)="_onAnimationStart($event.animationName)"
(animationend)="_onAnimationDone($event.animationName)"
(animationcancel)="_onAnimationDone($event.animationName)"
[attr.aria-label]="ariaLabel || null"
[attr.aria-labelledby]="ariaLabelledby || null"
[attr.aria-describedby]="ariaDescribedby || null">
Expand Down
33 changes: 32 additions & 1 deletion src/material/menu/menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,33 @@ mat-menu {
}
}

@keyframes _mat-menu-enter {
from {
opacity: 0;
transform: scale(0.8);
}

to {
opacity: 1;
transform: none;
}
}

@keyframes _mat-menu-exit {
from {
opacity: 1;
}

to {
opacity: 0;
}
}

.mat-mdc-menu-panel {
@include menu-common.base;
box-sizing: border-box;
outline: 0;
animation: _mat-menu-enter 120ms cubic-bezier(0, 0, 0.2, 1);

@include token-utils.use-tokens(tokens-mat-menu.$prefix, tokens-mat-menu.get-token-slots()) {
@include token-utils.create-token-slot(border-radius, container-shape);
Expand All @@ -48,14 +71,22 @@ mat-menu {
// We should clean it up eventually and re-approve all the screenshots.
will-change: transform, opacity;

&.mat-menu-panel-exit-animation {
animation: _mat-menu-exit 100ms 25ms linear forwards;
}

&.mat-menu-panel-animations-disabled {
animation: none;
}

// Prevent users from interacting with the panel while it's animating. Note that
// people won't be able to click through it, because the overlay pane will catch the click.
// This fixes the following issues:
// * Users accidentally opening sub-menus when the `overlapTrigger` option is enabled.
// * Users accidentally tapping on content inside the sub-menu on touch devices, if the
// sub-menu overlaps the trigger. The issue is due to touch devices emulating the
// `mouseenter` event by dispatching it on tap.
&.ng-animating {
&.mat-menu-panel-animating {
pointer-events: none;

// If the same menu is assigned to multiple triggers and the user moves quickly between them
Expand Down
25 changes: 0 additions & 25 deletions src/material/menu/menu.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1237,31 +1237,6 @@ describe('MatMenu', () => {
expect(fixture.componentInstance.items.length).toBe(0);
}));

it('should wait for the close animation to finish before considering the panel as closed', fakeAsync(() => {
const fixture = createComponent(SimpleLazyMenu);
fixture.detectChanges();
const trigger = fixture.componentInstance.trigger;

expect(trigger.menuOpen).withContext('Expected menu to start off closed').toBe(false);

trigger.openMenu();
fixture.detectChanges();
tick(500);

expect(trigger.menuOpen).withContext('Expected menu to be open').toBe(true);

trigger.closeMenu();
fixture.detectChanges();

expect(trigger.menuOpen)
.withContext('Expected menu to be considered open while the close animation is running')
.toBe(true);
tick(500);
fixture.detectChanges();

expect(trigger.menuOpen).withContext('Expected menu to be closed').toBe(false);
}));

it('should focus the first menu item when opening a lazy menu via keyboard', async () => {
const fixture = createComponent(SimpleLazyMenu);
fixture.autoDetectChanges();
Expand Down
Loading
Loading