fix(material/select): float label on focus if there's a placeholder (#…

…19517)

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.

(cherry picked from commit 7a972fb)

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: `
     <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>
@@ -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: `
     <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>

src/material/select/select.ts

@@ -1090,7 +1090,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;