diff --git a/scripts/check-mdc-tests-config.ts b/scripts/check-mdc-tests-config.ts index bccb7185e851..3d8a32cb8a2b 100644 --- a/scripts/check-mdc-tests-config.ts +++ b/scripts/check-mdc-tests-config.ts @@ -140,9 +140,6 @@ export const config = { 'element is inside an ngIf' ], 'mdc-select': [ - // TODO(crisbeto): remove this exception once #22187 lands. - 'should float the label on focus if it has a placeholder', - // These tests are excluded, because they're verifying the functionality that positions // the select panel over the trigger which isn't supported in the MDC select. 'should set the width of the overlay based on a larger trigger width', diff --git a/src/material-experimental/mdc-select/select.spec.ts b/src/material-experimental/mdc-select/select.spec.ts index 77522b8b824a..186d1b348eeb 100644 --- a/src/material-experimental/mdc-select/select.spec.ts +++ b/src/material-experimental/mdc-select/select.spec.ts @@ -2364,6 +2364,22 @@ describe('MDC-based MatSelect', () => { expect(label.classList.contains('mdc-floating-label--float-above')) .toBe(true, 'Label should be floating'); })); + + it('should float the label on focus if it has a placeholder', fakeAsync(() => { + const fixture = TestBed.createComponent(FloatLabelSelect); + fixture.detectChanges(); + expect(fixture.componentInstance.placeholder).toBeTruthy(); + + fixture.componentInstance.floatLabel = 'auto'; + fixture.detectChanges(); + + dispatchFakeEvent(fixture.nativeElement.querySelector('.mat-mdc-select'), 'focus'); + fixture.detectChanges(); + + const label = fixture.nativeElement.querySelector('.mat-mdc-form-field label'); + expect(label.classList.contains('mdc-floating-label--float-above')) + .toBe(true, 'Label should be floating'); + })); }); describe('with a sibling component that throws an error', () => { @@ -4123,7 +4139,7 @@ class BasicSelectOnPushPreselected { template: ` Select a food - + {{ food.viewValue }} @@ -4134,6 +4150,7 @@ class BasicSelectOnPushPreselected { class FloatLabelSelect { floatLabel: FloatLabelType | null = 'auto'; control = new FormControl(); + placeholder = 'Food I want to eat right now'; foods: any[] = [ { value: 'steak-0', viewValue: 'Steak' }, { value: 'pizza-1', viewValue: 'Pizza' }, @@ -4238,7 +4255,7 @@ class BasicSelectWithTheming { template: ` Select a food - + {{ food.viewValue }} diff --git a/src/material-experimental/mdc-select/select.ts b/src/material-experimental/mdc-select/select.ts index 1ef49b9846bc..65e44f1e6ad9 100644 --- a/src/material-experimental/mdc-select/select.ts +++ b/src/material-experimental/mdc-select/select.ts @@ -116,7 +116,7 @@ export class MatSelect extends _MatSelectBase implements OnInit get shouldLabelFloat(): boolean { // Since the panel doesn't overlap the trigger, we // want the label to only float when there's a value. - return this.panelOpen || !this.empty; + return this.panelOpen || !this.empty || (this.focused && !!this.placeholder); } ngOnInit() {