fix(material-experimental/mdc-select): float label on focus if there'…

…s a placeholder

This is the equivalent of angular#19517 for the MDC-based select.

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`.

src/material-experimental/mdc-chips/chip-input.ts

@@ -25,7 +25,7 @@ import {MatChipTextControl} from './chip-text-control';
 
 /** Represents an input event on a `matChipInput`. */
 export interface MatChipInputEvent {
-  /** 
+  /**
    * The native `<input>` element that the event is being fired for.
    * @deprecated Use `MatChipInputEvent#chipInput.inputElement` instead.
    * @breaking-change 13.0.0 This property will be removed.
@@ -34,9 +34,9 @@ export interface MatChipInputEvent {
 
   /** The value of the input. */
   value: string;
-  
-  /** 
-   * Reference to the chip input that emitted the event. 
+
+  /**
+   * Reference to the chip input that emitted the event.
    * @breaking-change 13.0.0 This property will be made required.
    */
   chipInput?: MatChipInput;

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: `
     <mat-form-field [floatLabel]="floatLabel">
       <mat-label>Select a food</mat-label>
-      <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>
@@ -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: `
     <mat-form-field>
       <mat-label>Select a food</mat-label>
-      <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-experimental/mdc-select/select.ts

@@ -116,7 +116,7 @@ export class MatSelect extends _MatSelectBase<MatSelectChange> 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() {

src/material/chips/chip-input.ts

@@ -25,7 +25,7 @@ import {MatChipTextControl} from './chip-text-control';
 
 /** Represents an input event on a `matChipInput`. */
 export interface MatChipInputEvent {
-  /** 
+  /**
    * The native `<input>` element that the event is being fired for.
    * @deprecated Use `MatChipInputEvent#chipInput.inputElement` instead.
    * @breaking-change 13.0.0 This property will be removed.
@@ -34,9 +34,9 @@ export interface MatChipInputEvent {
 
   /** The value of the input. */
   value: string;
-  
-  /** 
-   * Reference to the chip input that emitted the event. 
+
+  /**
+   * Reference to the chip input that emitted the event.
    * @breaking-change 13.0.0 This property will be made required.
    */
   chipInput?: MatChipInput;