diff --git a/src/material-experimental/mdc-select/select.spec.ts b/src/material-experimental/mdc-select/select.spec.ts index cc06b75dd543..b78ff66f9f82 100644 --- a/src/material-experimental/mdc-select/select.spec.ts +++ b/src/material-experimental/mdc-select/select.spec.ts @@ -2340,6 +2340,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', () => { @@ -4098,7 +4114,7 @@ class BasicSelectOnPushPreselected { template: ` Select a food - + {{ food.viewValue }} @@ -4109,6 +4125,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' }, @@ -4213,7 +4230,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 15d1c2162a92..56c3add73428 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.empty; + return !this.empty || (this.focused && !!this.placeholder); } ngOnInit() {