diff --git a/src/material/select/select.spec.ts b/src/material/select/select.spec.ts index 14caf5e1878c..4c456a151067 100644 --- a/src/material/select/select.spec.ts +++ b/src/material/select/select.spec.ts @@ -2378,7 +2378,7 @@ describe('MatSelect', () => { .toBe(true, 'Label should be floating'); })); - it ('should default to global floating label type', fakeAsync(() => { + it('should default to global floating label type', fakeAsync(() => { fixture.destroy(); TestBed.resetTestingModule(); @@ -2409,6 +2409,19 @@ describe('MatSelect', () => { expect(formField.classList.contains('mat-form-field-should-float')) .toBe(true, 'Label should be floating'); })); + + it('should float the label on focus if it has a placeholder', fakeAsync(() => { + expect(fixture.componentInstance.placeholder).toBeTruthy(); + + fixture.componentInstance.floatLabel = 'auto'; + fixture.detectChanges(); + + dispatchFakeEvent(fixture.nativeElement.querySelector('.mat-select'), 'focus'); + fixture.detectChanges(); + + expect(formField.classList.contains('mat-form-field-should-float')) + .toBe(true, 'Label should be floating'); + })); }); describe('with a sibling component that throws an error', () => { @@ -4992,7 +5005,7 @@ class BasicSelectOnPushPreselected { selector: 'floating-label-select', template: ` - + {{ food.viewValue }} @@ -5002,6 +5015,7 @@ class BasicSelectOnPushPreselected { }) class FloatLabelSelect { floatLabel: FloatLabelType | null = 'auto'; + placeholder = 'Food I want to eat right now'; control = new FormControl(); foods: any[] = [ { value: 'steak-0', viewValue: 'Steak' }, @@ -5106,7 +5120,7 @@ class BasicSelectWithTheming { selector: 'reset-values-select', template: ` - + {{ food.viewValue }} diff --git a/src/material/select/select.ts b/src/material/select/select.ts index b11a9b27b71e..9c31ae533485 100644 --- a/src/material/select/select.ts +++ b/src/material/select/select.ts @@ -1090,7 +1090,7 @@ export abstract class _MatSelectBase extends _MatSelectMixinBase implements A * @docs-private */ get shouldLabelFloat(): boolean { - return this._panelOpen || !this.empty; + return this._panelOpen || !this.empty || (this._focused && !!this._placeholder); } static ngAcceptInputType_required: BooleanInput;