Skip to content

Commit 47d91bd

Browse files
committed
fixup! fix(material/snack-bar): switch away from animations module
1 parent 392ae2c commit 47d91bd

File tree

4 files changed

+94
-78
lines changed

4 files changed

+94
-78
lines changed

src/material/snack-bar/snack-bar-container.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,10 @@ $_side-padding: 8px;
3737
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
3838
margin: 8px;
3939

40+
&.mat-snack-bar-fallback-visible {
41+
opacity: 1;
42+
}
43+
4044
.mat-mdc-snack-bar-handset & {
4145
width: 100vw;
4246
}

src/material/snack-bar/snack-bar-container.ts

Lines changed: 83 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,16 @@
77
*/
88

99
import {
10+
afterNextRender,
1011
ANIMATION_MODULE_TYPE,
1112
ChangeDetectionStrategy,
1213
ChangeDetectorRef,
1314
Component,
1415
ComponentRef,
15-
DoCheck,
1616
ElementRef,
1717
EmbeddedViewRef,
1818
inject,
19+
Injector,
1920
NgZone,
2021
OnDestroy,
2122
ViewChild,
@@ -29,11 +30,14 @@ import {
2930
DomPortal,
3031
TemplatePortal,
3132
} from '@angular/cdk/portal';
32-
import {Observable, Subject} from 'rxjs';
33+
import {Observable, Subject, of} from 'rxjs';
3334
import {_IdGenerator, AriaLivePoliteness} from '@angular/cdk/a11y';
3435
import {Platform} from '@angular/cdk/platform';
3536
import {MatSnackBarConfig} from './snack-bar-config';
3637

38+
const ENTER_ANIMATION = '_mat-snack-bar-enter';
39+
const EXIT_ANIMATION = '_mat-snack-bar-exit';
40+
3741
/**
3842
* Internal component that wraps user-provided snack bar content.
3943
* @docs-private
@@ -54,15 +58,16 @@ import {MatSnackBarConfig} from './snack-bar-config';
5458
'[class.mat-snack-bar-container-enter]': '_animationState === "visible"',
5559
'[class.mat-snack-bar-container-exit]': '_animationState === "hidden"',
5660
'[class.mat-snack-bar-container-animations-enabled]': '!_animationsDisabled',
57-
'(animationend)': 'onAnimationEnd($event)',
58-
'(animationcancel)': 'onAnimationEnd($event)',
61+
'(animationend)': 'onAnimationEnd($event.animationName)',
62+
'(animationcancel)': 'onAnimationEnd($event.animationName)',
5963
},
6064
})
61-
export class MatSnackBarContainer extends BasePortalOutlet implements DoCheck, OnDestroy {
65+
export class MatSnackBarContainer extends BasePortalOutlet implements OnDestroy {
6266
private _ngZone = inject(NgZone);
6367
private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
6468
private _changeDetectorRef = inject(ChangeDetectorRef);
6569
private _platform = inject(Platform);
70+
private _injector = inject(Injector);
6671
protected _animationsDisabled =
6772
inject(ANIMATION_MODULE_TYPE, {optional: true}) === 'NoopAnimations';
6873
snackBarConfig = inject(MatSnackBarConfig);
@@ -71,7 +76,6 @@ export class MatSnackBarContainer extends BasePortalOutlet implements DoCheck, O
7176
private _trackedModals = new Set<Element>();
7277
private _enterFallback: ReturnType<typeof setTimeout> | undefined;
7378
private _exitFallback: ReturnType<typeof setTimeout> | undefined;
74-
private _pendingNoopAnimation: boolean;
7579

7680
/** The number of milliseconds to wait before announcing the snack bar's content. */
7781
private readonly _announceDelay: number = 150;
@@ -173,11 +177,15 @@ export class MatSnackBarContainer extends BasePortalOutlet implements DoCheck, O
173177
};
174178

175179
/** Handle end of animations, updating the state of the snackbar. */
176-
onAnimationEnd(event: AnimationEvent) {
177-
if (event.animationName === '_mat-snack-bar-exit') {
180+
onAnimationEnd(animationName: string) {
181+
if (animationName === EXIT_ANIMATION) {
178182
this._completeExit();
179-
} else if (event.animationName === '_mat-snack-bar-enter') {
180-
this._completeEnter();
183+
} else if (animationName === ENTER_ANIMATION) {
184+
clearTimeout(this._enterFallback);
185+
this._ngZone.run(() => {
186+
this._onEnter.next();
187+
this._onEnter.complete();
188+
});
181189
}
182190
}
183191

@@ -192,16 +200,34 @@ export class MatSnackBarContainer extends BasePortalOutlet implements DoCheck, O
192200
this._screenReaderAnnounce();
193201

194202
if (this._animationsDisabled) {
195-
this._pendingNoopAnimation = true;
203+
afterNextRender(
204+
() => {
205+
this._ngZone.run(() => {
206+
queueMicrotask(() => this.onAnimationEnd(ENTER_ANIMATION));
207+
});
208+
},
209+
{
210+
injector: this._injector,
211+
},
212+
);
196213
} else {
197214
clearTimeout(this._enterFallback);
198-
this._enterFallback = setTimeout(() => this._completeEnter(), 200);
215+
this._enterFallback = setTimeout(() => {
216+
// The snack bar will stay invisible if it fails to animate. Add a fallback class so it
217+
// becomes visible. This can happen in some apps that do `* {animation: none !important}`.
218+
this._elementRef.nativeElement.classList.add('mat-snack-bar-fallback-visible');
219+
this.onAnimationEnd(ENTER_ANIMATION);
220+
}, 200);
199221
}
200222
}
201223
}
202224

203225
/** Begin animation of the snack bar exiting from view. */
204226
exit(): Observable<void> {
227+
if (this._destroyed) {
228+
return of(undefined);
229+
}
230+
205231
// It's common for snack bars to be opened by random outside calls like HTTP requests or
206232
// errors. Run inside the NgZone to ensure that it functions correctly.
207233
this._ngZone.run(() => {
@@ -221,50 +247,32 @@ export class MatSnackBarContainer extends BasePortalOutlet implements DoCheck, O
221247
clearTimeout(this._announceTimeoutId);
222248

223249
if (this._animationsDisabled) {
224-
this._pendingNoopAnimation = true;
250+
afterNextRender(
251+
() => {
252+
this._ngZone.run(() => {
253+
queueMicrotask(() => this.onAnimationEnd(EXIT_ANIMATION));
254+
});
255+
},
256+
{
257+
injector: this._injector,
258+
},
259+
);
225260
} else {
226261
clearTimeout(this._exitFallback);
227-
this._exitFallback = setTimeout(() => this._completeExit(), 200);
262+
this._exitFallback = setTimeout(() => this.onAnimationEnd(EXIT_ANIMATION), 200);
228263
}
229264
});
230265

231266
return this._onExit;
232267
}
233268

234-
ngDoCheck(): void {
235-
// Aims to mimic the timing of when the snack back was using the animations
236-
// module since many internal tests depend on the old timing.
237-
if (this._pendingNoopAnimation) {
238-
this._pendingNoopAnimation = false;
239-
queueMicrotask(() => {
240-
if (this._animationState === 'visible') {
241-
this._completeEnter();
242-
} else {
243-
this._completeExit();
244-
}
245-
});
246-
}
247-
}
248-
249269
/** Makes sure the exit callbacks have been invoked when the element is destroyed. */
250270
ngOnDestroy() {
251271
this._destroyed = true;
252272
this._clearFromModals();
253273
this._completeExit();
254274
}
255275

256-
private _completeEnter() {
257-
clearTimeout(this._enterFallback);
258-
this._ngZone.run(() => {
259-
this._onEnter.next();
260-
this._onEnter.complete();
261-
});
262-
}
263-
264-
/**
265-
* Removes the element in a microtask. Helps prevent errors where we end up
266-
* removing an element which is in the middle of an animation.
267-
*/
268276
private _completeExit() {
269277
clearTimeout(this._exitFallback);
270278
queueMicrotask(() => {
@@ -360,33 +368,40 @@ export class MatSnackBarContainer extends BasePortalOutlet implements DoCheck, O
360368
* announce it.
361369
*/
362370
private _screenReaderAnnounce() {
363-
if (!this._announceTimeoutId) {
364-
this._ngZone.runOutsideAngular(() => {
365-
this._announceTimeoutId = setTimeout(() => {
366-
const inertElement = this._elementRef.nativeElement.querySelector('[aria-hidden]');
367-
const liveElement = this._elementRef.nativeElement.querySelector('[aria-live]');
368-
369-
if (inertElement && liveElement) {
370-
// If an element in the snack bar content is focused before being moved
371-
// track it and restore focus after moving to the live region.
372-
let focusedElement: HTMLElement | null = null;
373-
if (
374-
this._platform.isBrowser &&
375-
document.activeElement instanceof HTMLElement &&
376-
inertElement.contains(document.activeElement)
377-
) {
378-
focusedElement = document.activeElement;
379-
}
380-
381-
inertElement.removeAttribute('aria-hidden');
382-
liveElement.appendChild(inertElement);
383-
focusedElement?.focus();
384-
385-
this._onAnnounce.next();
386-
this._onAnnounce.complete();
387-
}
388-
}, this._announceDelay);
389-
});
371+
if (this._announceTimeoutId) {
372+
return;
390373
}
374+
375+
this._ngZone.runOutsideAngular(() => {
376+
this._announceTimeoutId = setTimeout(() => {
377+
if (this._destroyed) {
378+
return;
379+
}
380+
381+
const element = this._elementRef.nativeElement;
382+
const inertElement = element.querySelector('[aria-hidden]');
383+
const liveElement = element.querySelector('[aria-live]');
384+
385+
if (inertElement && liveElement) {
386+
// If an element in the snack bar content is focused before being moved
387+
// track it and restore focus after moving to the live region.
388+
let focusedElement: HTMLElement | null = null;
389+
if (
390+
this._platform.isBrowser &&
391+
document.activeElement instanceof HTMLElement &&
392+
inertElement.contains(document.activeElement)
393+
) {
394+
focusedElement = document.activeElement;
395+
}
396+
397+
inertElement.removeAttribute('aria-hidden');
398+
liveElement.appendChild(inertElement);
399+
focusedElement?.focus();
400+
401+
this._onAnnounce.next();
402+
this._onAnnounce.complete();
403+
}
404+
}, this._announceDelay);
405+
});
391406
}
392407
}

src/material/snack-bar/snack-bar.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -242,6 +242,11 @@ export class MatSnackBar implements OnDestroy {
242242
}
243243
});
244244

245+
// If a dismiss timeout is provided, set up dismiss based on after the snackbar is opened.
246+
if (config.duration && config.duration > 0) {
247+
snackBarRef.afterOpened().subscribe(() => snackBarRef._dismissAfter(config.duration!));
248+
}
249+
245250
if (this._openedSnackBarRef) {
246251
// If a snack bar is already in view, dismiss it and enter the
247252
// new snack bar after exit animation is complete.
@@ -253,11 +258,6 @@ export class MatSnackBar implements OnDestroy {
253258
// If no snack bar is in view, enter the new snack bar.
254259
snackBarRef.containerInstance.enter();
255260
}
256-
257-
// If a dismiss timeout is provided, set up dismiss based on after the snackbar is opened.
258-
if (config.duration && config.duration > 0) {
259-
snackBarRef.afterOpened().subscribe(() => snackBarRef._dismissAfter(config.duration!));
260-
}
261261
}
262262

263263
/**

tools/public_api_guard/material/snack-bar.md

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import { ComponentPortal } from '@angular/cdk/portal';
1212
import { ComponentRef } from '@angular/core';
1313
import { ComponentType } from '@angular/cdk/overlay';
1414
import { Direction } from '@angular/cdk/bidi';
15-
import { DoCheck } from '@angular/core';
1615
import { DomPortal } from '@angular/cdk/portal';
1716
import { ElementRef } from '@angular/core';
1817
import { EmbeddedViewRef } from '@angular/core';
@@ -94,7 +93,7 @@ export class MatSnackBarConfig<D = any> {
9493
}
9594

9695
// @public
97-
export class MatSnackBarContainer extends BasePortalOutlet implements DoCheck, OnDestroy {
96+
export class MatSnackBarContainer extends BasePortalOutlet implements OnDestroy {
9897
constructor(...args: unknown[]);
9998
// (undocumented)
10099
protected _animationsDisabled: boolean;
@@ -108,10 +107,8 @@ export class MatSnackBarContainer extends BasePortalOutlet implements DoCheck, O
108107
_label: ElementRef;
109108
_live: AriaLivePoliteness;
110109
readonly _liveElementId: string;
111-
// (undocumented)
112-
ngDoCheck(): void;
113110
ngOnDestroy(): void;
114-
onAnimationEnd(event: AnimationEvent): void;
111+
onAnimationEnd(animationName: string): void;
115112
readonly _onAnnounce: Subject<void>;
116113
readonly _onEnter: Subject<void>;
117114
readonly _onExit: Subject<void>;

0 commit comments

Comments
 (0)