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

…s a placeholder (#22187)

This is the equivalent of #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`.

scripts/check-mdc-tests-config.ts

@@ -140,9 +140,6 @@ export const config = {
           'element is inside an ngIf'
     ],
     'mdc-select': [
-      // TODO(crisbeto): remove this exception once #22187 lands.
-      'should float the label on focus if it has a placeholder',
-
       // These tests are excluded, because they're verifying the functionality that positions
       // the select panel over the trigger which isn't supported in the MDC select.
       'should set the width of the overlay based on a larger trigger width',

src/material-experimental/mdc-select/select.spec.ts

@@ -2364,6 +2364,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', () => {
@@ -4123,7 +4139,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>
@@ -4134,6 +4150,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' },
@@ -4238,7 +4255,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.panelOpen || !this.empty;
+    return this.panelOpen || !this.empty || (this.focused && !!this.placeholder);
   }
 
   ngOnInit() {