Skip to content

Commit f16affc

Browse files
crisbetommalerba
authored andcommitted
fix(select): unable to hide via visibility (#4264)
Fixes not being able to hide a `md-select` instance through `visibility: hidden`. Fixes #4247.
1 parent 6a34f6f commit f16affc

File tree

3 files changed

+6
-6
lines changed

3 files changed

+6
-6
lines changed

src/lib/select/select.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
class="mat-select-placeholder"
44
[class.mat-floating-placeholder]="_selectionModel.hasValue()"
55
[@transformPlaceholder]="_getPlaceholderAnimationState()"
6-
[style.visibility]="_getPlaceholderVisibility()"
6+
[style.opacity]="_getPlaceholderOpacity()"
77
[style.width.px]="_selectedValueWidth"> {{ placeholder }} </span>
88
<span class="mat-select-value" *ngIf="_selectionModel.hasValue()">
99
<span class="mat-select-value-text">{{ triggerValue }}</span>

src/lib/select/select.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1646,13 +1646,13 @@ describe('MdSelect', () => {
16461646
fixture.componentInstance.floatPlaceholder = 'never';
16471647
fixture.detectChanges();
16481648

1649-
expect(placeholder.style.visibility).toBe('visible');
1649+
expect(placeholder.style.opacity).toBe('1');
16501650
expect(fixture.componentInstance.select._getPlaceholderAnimationState()).toBeFalsy();
16511651

16521652
fixture.componentInstance.control.setValue('pizza-1');
16531653
fixture.detectChanges();
16541654

1655-
expect(placeholder.style.visibility).toBe('hidden');
1655+
expect(placeholder.style.opacity).toBe('0');
16561656
expect(fixture.componentInstance.select._getPlaceholderAnimationState()).toBeFalsy();
16571657
});
16581658

src/lib/select/select.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -812,11 +812,11 @@ export class MdSelect implements AfterContentInit, OnDestroy, OnInit, ControlVal
812812
}
813813

814814
/**
815-
* Determines the CSS `visibility` of the placeholder element.
815+
* Determines the CSS `opacity` of the placeholder element.
816816
*/
817-
_getPlaceholderVisibility(): 'visible'|'hidden' {
817+
_getPlaceholderOpacity(): string {
818818
return (this.floatPlaceholder !== 'never' || this._selectionModel.isEmpty()) ?
819-
'visible' : 'hidden';
819+
'1' : '0';
820820
}
821821

822822
/** Returns the aria-label of the select component. */

0 commit comments

Comments
 (0)