From ba74a5890a481b2cf20a5885193f4568b30fb2c7 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Tue, 2 Jun 2020 21:50:53 +0200
Subject: [PATCH] fix(select): float label on focus if there's a placeholder

Historically we've only floated the `mat-select` label if a value is selected or the panel is open, because we wouldn't otherwise have anything to show. These changes make it so that we also float it on focus, if there's `placeholder` text that can be shown. This behavior is consistent with `MatInput`.

Fixes #19514.
---
 src/material/select/select.spec.ts | 20 +++++++++++++++++---
 src/material/select/select.ts      |  2 +-
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/material/select/select.spec.ts b/src/material/select/select.spec.ts
index 7cdbda18ec6a..f87d2b6a6226 100644
--- a/src/material/select/select.spec.ts
+++ b/src/material/select/select.spec.ts
@@ -2332,7 +2332,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();
@@ -2360,6 +2360,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', () => {
@@ -4870,7 +4883,7 @@ class BasicSelectOnPushPreselected {
   selector: 'floating-label-select',
   template: `
     <mat-form-field [floatLabel]="floatLabel">
-      <mat-select placeholder="Food I want to eat right now" [formControl]="control">
+      <mat-select [placeholder]="placeholder" [formControl]="control">
         <mat-option *ngFor="let food of foods" [value]="food.value">
           {{ food.viewValue }}
         </mat-option>
@@ -4880,6 +4893,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' },
@@ -4984,7 +4998,7 @@ class BasicSelectWithTheming {
   selector: 'reset-values-select',
   template: `
     <mat-form-field>
-      <mat-select placeholder="Food" [formControl]="control">
+      <mat-select [formControl]="control">
         <mat-option *ngFor="let food of foods" [value]="food.value">
           {{ food.viewValue }}
         </mat-option>
diff --git a/src/material/select/select.ts b/src/material/select/select.ts
index b87ec57168b7..d1f4fa4b21dc 100644
--- a/src/material/select/select.ts
+++ b/src/material/select/select.ts
@@ -1081,7 +1081,7 @@ export abstract class _MatSelectBase<C> 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;