Skip to content

Commit 66ba197

Browse files
committed
fix(snack-bar): snack bar not animating in if no positions are passed in
Adds some better handling for the case where no positions are passed into a snack bar. Currently the snack bar attempts to animate in to an invalid animation state. Fixes #11197.
1 parent 4bf3ceb commit 66ba197

File tree

2 files changed

+41
-4
lines changed

2 files changed

+41
-4
lines changed

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

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,14 @@ import {take} from 'rxjs/operators';
3030
import {matSnackBarAnimations} from './snack-bar-animations';
3131
import {MatSnackBarConfig} from './snack-bar-config';
3232

33+
/**
34+
* Default positions to be used as fallbacks if necessary.
35+
* @docs-private
36+
*/
37+
const {
38+
horizontalPosition: defaultHorizontalPosition,
39+
verticalPosition: defaultVerticalPosition
40+
} = new MatSnackBarConfig();
3341

3442
/**
3543
* Internal component that wraps user-provided snack bar content.
@@ -113,14 +121,14 @@ export class MatSnackBarContainer extends BasePortalOutlet implements OnDestroy
113121
/** Begin animation of snack bar entrance into view. */
114122
enter(): void {
115123
if (!this._destroyed) {
116-
this._animationState = `visible-${this.snackBarConfig.verticalPosition}`;
124+
this._animationState = `visible-${this._getVerticalPosition()}`;
117125
this._changeDetectorRef.detectChanges();
118126
}
119127
}
120128

121129
/** Begin animation of the snack bar exiting from view. */
122130
exit(): Observable<void> {
123-
this._animationState = `hidden-${this.snackBarConfig.verticalPosition}`;
131+
this._animationState = `hidden-${this._getVerticalPosition()}`;
124132
return this._onExit;
125133
}
126134

@@ -155,11 +163,11 @@ export class MatSnackBarContainer extends BasePortalOutlet implements OnDestroy
155163
}
156164
}
157165

158-
if (this.snackBarConfig.horizontalPosition === 'center') {
166+
if ((this.snackBarConfig.horizontalPosition || defaultHorizontalPosition) === 'center') {
159167
element.classList.add('mat-snack-bar-center');
160168
}
161169

162-
if (this.snackBarConfig.verticalPosition === 'top') {
170+
if (this._getVerticalPosition() === 'top') {
163171
element.classList.add('mat-snack-bar-top');
164172
}
165173
}
@@ -170,4 +178,8 @@ export class MatSnackBarContainer extends BasePortalOutlet implements OnDestroy
170178
throw Error('Attempting to attach snack bar content after content is already attached');
171179
}
172180
}
181+
182+
private _getVerticalPosition() {
183+
return this.snackBarConfig.verticalPosition || defaultVerticalPosition;
184+
}
173185
}

src/lib/snack-bar/snack-bar.spec.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -422,6 +422,31 @@ describe('MatSnackBar', () => {
422422
.toContain('custom-class', 'Expected class applied through the defaults to be applied.');
423423
}));
424424

425+
it('should position the snack bar correctly if no default position is defined', fakeAsync(() => {
426+
overlayContainer.ngOnDestroy();
427+
viewContainerFixture.destroy();
428+
429+
TestBed
430+
.resetTestingModule()
431+
.overrideProvider(MAT_SNACK_BAR_DEFAULT_OPTIONS, {
432+
deps: [],
433+
useFactory: () => ({politeness: 'polite'})
434+
})
435+
.configureTestingModule({imports: [MatSnackBarModule, NoopAnimationsModule]})
436+
.compileComponents();
437+
438+
inject([MatSnackBar, OverlayContainer], (sb: MatSnackBar, oc: OverlayContainer) => {
439+
snackBar = sb;
440+
overlayContainer = oc;
441+
overlayContainerElement = oc.getContainerElement();
442+
})();
443+
444+
const snackBarRef = snackBar.open(simpleMessage);
445+
flush();
446+
447+
expect(snackBarRef.containerInstance._animationState).toBe('visible-bottom');
448+
}));
449+
425450
describe('with custom component', () => {
426451
it('should open a custom component', () => {
427452
const snackBarRef = snackBar.openFromComponent(BurritosNotification);

0 commit comments

Comments
 (0)