fix(select): unable to hide via visibility (angular#4264)

Fixes not being able to hide a `md-select` instance through `visibility: hidden`. Fixes angular#4247.
crisbeto · Apr 27, 2017 · f16affc · f16affc
1 parent 6a34f6f
commit f16affc
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/src/lib/select/select.html b/src/lib/select/select.html
@@ -3,7 +3,7 @@
     class="mat-select-placeholder"
     [class.mat-floating-placeholder]="_selectionModel.hasValue()"
     [@transformPlaceholder]="_getPlaceholderAnimationState()"
-    [style.visibility]="_getPlaceholderVisibility()"
+    [style.opacity]="_getPlaceholderOpacity()"
     [style.width.px]="_selectedValueWidth"> {{ placeholder }} </span>
   <span class="mat-select-value" *ngIf="_selectionModel.hasValue()">
     <span class="mat-select-value-text">{{ triggerValue }}</span>

diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts
@@ -1646,13 +1646,13 @@ describe('MdSelect', () => {
       fixture.componentInstance.floatPlaceholder = 'never';
       fixture.detectChanges();
 
-      expect(placeholder.style.visibility).toBe('visible');
+      expect(placeholder.style.opacity).toBe('1');
       expect(fixture.componentInstance.select._getPlaceholderAnimationState()).toBeFalsy();
 
       fixture.componentInstance.control.setValue('pizza-1');
       fixture.detectChanges();
 
-      expect(placeholder.style.visibility).toBe('hidden');
+      expect(placeholder.style.opacity).toBe('0');
       expect(fixture.componentInstance.select._getPlaceholderAnimationState()).toBeFalsy();
     });
 

diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
@@ -812,11 +812,11 @@ export class MdSelect implements AfterContentInit, OnDestroy, OnInit, ControlVal
   }
 
   /**
-   * Determines the CSS `visibility` of the placeholder element.
+   * Determines the CSS `opacity` of the placeholder element.
    */
-  _getPlaceholderVisibility(): 'visible'|'hidden' {
+  _getPlaceholderOpacity(): string {
     return (this.floatPlaceholder !== 'never' || this._selectionModel.isEmpty()) ?
-        'visible' : 'hidden';
+        '1' : '0';
   }
 
   /** Returns the aria-label of the select component. */