make placeholder float when select is opened, and prevent it from overlapping the trigger arrow

Author: mmalerba

src/demo-app/baseline/baseline-demo.html

@@ -15,7 +15,7 @@
     </md-form-field>
     | Text 5 |
     <md-form-field>
-      <md-select placeholder="Select">
+      <md-select placeholder="This placeholder is really really really long">
         <md-option value="option">Option</md-option>
         <md-option value="long">This option is really really really long</md-option>
       </md-select>
@@ -46,7 +46,7 @@ <h1>
       </md-form-field>
       | Text 5 |
       <md-form-field>
-        <md-select placeholder="Select">
+        <md-select placeholder="This placeholder is really really really long">
           <md-option value="option">Option</md-option>
           <md-option value="long">This option is really really really long</md-option>
         </md-select>

src/lib/select/select.scss

@@ -9,6 +9,8 @@ $mat-select-arrow-margin: 4px !default;
 $mat-select-panel-max-height: 256px !default;
 $mat-select-item-height: 3em !default;
 
+$mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-arrow-margin);
+
 .mat-select {
   //display: inline-block;
   outline: none;
@@ -82,6 +84,12 @@ $mat-select-item-height: 3em !default;
   }
 }
 
-.mat-form-field-type-mat-select .mat-form-field-flex {
-  cursor: pointer;
+.mat-form-field-type-mat-select {
+  .mat-form-field-flex {
+    cursor: pointer;
+  }
+
+  .mat-form-field-placeholder {
+    width: calc(100% - #{$mat-select-placeholder-arrow-space});
+  }
 }

src/lib/select/select.spec.ts

@@ -589,8 +589,8 @@ describe('MdSelect', () => {
 
       const options =
           overlayContainerElement.querySelectorAll('md-option') as NodeListOf<HTMLElement>;
-      expect(options[1].classList)
-          .toContain('mat-selected', `Expected option with the control's new value to be selected.`);
+      expect(options[1].classList).toContain('mat-selected',
+          `Expected option with the control's new value to be selected.`);
     });
 
     it('should update the form value when the view changes', () => {
@@ -973,7 +973,7 @@ describe('MdSelect', () => {
       trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
       formField = fixture.debugElement.query(By.css('.mat-form-field')).nativeElement;
     }));
-/* TODO(mmalerba): Verify this is correct behavior
+
     it('should float the placeholder when the panel is open and unselected', () => {
       expect(formField.classList.contains('mat-form-field-should-float'))
           .toBe(false, 'Expected placeholder to initially have a normal position.');
@@ -991,7 +991,7 @@ describe('MdSelect', () => {
       expect(formField.classList.contains('mat-form-field-should-float'))
           .toBe(false, 'Expected placeholder to animate back down to normal position.');
     });
-*/
+
     it('should add a class to the panel when the menu is done animating', fakeAsync(() => {
       trigger.click();
       fixture.detectChanges();
@@ -1036,7 +1036,7 @@ describe('MdSelect', () => {
       const optionTop = options[index].getBoundingClientRect().top;
       const triggerFontSize = parseInt(window.getComputedStyle(trigger)['font-size']);
 
-      // TODO(mmalerba): not really sure where the "+1" is coming from here...
+      /** TODO(mmalerba): not really sure where the "+1" is coming from here... */
       expect(Math.floor(optionTop)).toBe(Math.floor(triggerTop - triggerFontSize + 1),
           `Expected trigger to align with option ${index}.`);
 
@@ -1150,8 +1150,8 @@ describe('MdSelect', () => {
         fixture.whenStable().then(() => {
           // The selected option should be scrolled to the center of the panel.
           // This will be its original offset from the scrollTop - half the panel height + half the
-          // option height. 10 (option index + 3 group labels before it) * 48 (option height) = 480px.
-          // 480 (offset from scrollTop) - 256/2 + 48/2 = 376px
+          // option height. 10 (option index + 3 group labels before it) * 48 (option height) =
+          // 480px. 480 (offset from scrollTop) - 256/2 + 48/2 = 376px
           expect(Math.floor(scrollContainer.scrollTop))
               .toBe(376, `Expected overlay panel to be scrolled to center the selected option.`);
 
@@ -3144,7 +3144,6 @@ class BasicSelectWithTheming {
         <md-option *ngFor="let food of foods" [value]="food.value">
           {{ food.viewValue }}
         </md-option>
-  
         <md-option>None</md-option>
       </md-select>
     </md-form-field>
@@ -3190,12 +3189,10 @@ class FalsyValueSelect {
       <md-select placeholder="Pokemon" [formControl]="control">
         <md-optgroup *ngFor="let group of pokemonTypes" [label]="group.name"
           [disabled]="group.disabled">
-  
           <md-option *ngFor="let pokemon of group.pokemon" [value]="pokemon.value">
             {{ pokemon.viewValue }}
           </md-option>
         </md-optgroup>
-  
         <md-option value="mime-11">Mr. Mime</md-option>
       </md-select>
     </md-form-field>
@@ -3322,7 +3319,7 @@ class BasicSelectWithoutFormsPreselected {
 }
 
 @Component({
-  template: `      
+  template: `
     <md-form-field>
       <md-select placeholder="Food" [(value)]="selectedFoods" multiple>
         <md-option *ngFor="let food of foods" [value]="food.value">
@@ -3346,8 +3343,8 @@ class BasicSelectWithoutFormsMultiple {
 
 @Component({
   selector: 'select-with-custom-trigger',
-  template: `      
-    <md-form-field>  
+  template: `
+    <md-form-field>
       <md-select placeholder="Food" [formControl]="control" #select="mdSelect">
         <md-select-trigger>
           {{ select.selected?.viewValue.split('').reverse().join('') }}

src/lib/select/select.ts

@@ -1221,7 +1221,7 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
   }
 
   // Implemented as part of MdFormFieldControl.
-  get shouldPlaceholderFloat() { return !this.empty; }
+  get shouldPlaceholderFloat() { return this._panelOpen || !this.empty; }
 }
 
 /** Clamps a value n between min and max values. */