diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts index ce39310ce301..2727fdb3d102 100644 --- a/src/lib/select/select.spec.ts +++ b/src/lib/select/select.spec.ts @@ -47,7 +47,9 @@ describe('MdSelect', () => { BasicSelectOnPush, BasicSelectOnPushPreselected, SelectWithPlainTabindex, - SelectEarlyAccessSibling + SelectEarlyAccessSibling, + BasicSelectInitiallyHidden, + BasicSelectNoPlaceholder ], providers: [ {provide: OverlayContainer, useFactory: () => { @@ -159,6 +161,25 @@ describe('MdSelect', () => { }); })); + it('should set the width of the overlay if the element was hidden initially', async(() => { + let initiallyHidden = TestBed.createComponent(BasicSelectInitiallyHidden); + + initiallyHidden.detectChanges(); + trigger = initiallyHidden.debugElement.query(By.css('.mat-select-trigger')).nativeElement; + trigger.style.width = '200px'; + + initiallyHidden.componentInstance.isVisible = true; + initiallyHidden.detectChanges(); + + initiallyHidden.whenStable().then(() => { + trigger.click(); + initiallyHidden.detectChanges(); + + const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; + expect(pane.style.minWidth).toBe('200px'); + }); + })); + it('should not attempt to open a select that does not have any options', () => { fixture.componentInstance.foods = []; fixture.detectChanges(); @@ -169,6 +190,21 @@ describe('MdSelect', () => { expect(fixture.componentInstance.select.panelOpen).toBe(false); }); + it('should set the width of the overlay if there is no placeholder', async(() => { + let noPlaceholder = TestBed.createComponent(BasicSelectNoPlaceholder); + + noPlaceholder.detectChanges(); + trigger = noPlaceholder.debugElement.query(By.css('.mat-select-trigger')).nativeElement; + + noPlaceholder.whenStable().then(() => { + trigger.click(); + noPlaceholder.detectChanges(); + + const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; + expect(parseInt(pane.style.minWidth)).toBeGreaterThan(0); + }); + })); + }); describe('selection logic', () => { @@ -1957,6 +1993,27 @@ class SelectWithPlainTabindex { } }) class SelectEarlyAccessSibling { } +@Component({ + selector: 'basic-select-initially-hidden', + template: ` + + There are no other options + + ` +}) +class BasicSelectInitiallyHidden { + isVisible = false; +} + +@Component({ + selector: 'basic-select-no-placeholder', + template: ` + + There are no other options + + ` +}) +class BasicSelectNoPlaceholder { } class FakeViewportRuler { getViewportRect() { diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts index 91b1b9a47558..a77488dc73bd 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -238,7 +238,7 @@ export class MdSelect implements AfterContentInit, OnDestroy, OnInit, ControlVal this._placeholder = value; // Must wait to record the trigger width to ensure placeholder width is included. - Promise.resolve(null).then(() => this._triggerWidth = this._getWidth()); + Promise.resolve(null).then(() => this._setTriggerWidth()); } /** Whether the component is disabled. */ @@ -352,6 +352,11 @@ export class MdSelect implements AfterContentInit, OnDestroy, OnInit, ControlVal if (this.disabled || !this.options.length) { return; } + + if (!this._triggerWidth) { + this._setTriggerWidth(); + } + this._calculateOverlayPosition(); this._placeholderState = this._floatPlaceholderState(); this._panelOpen = true; @@ -443,11 +448,12 @@ export class MdSelect implements AfterContentInit, OnDestroy, OnInit, ControlVal return this._dir ? this._dir.value === 'rtl' : false; } - /** The width of the trigger element. This is necessary to match + /** + * Sets the width of the trigger element. This is necessary to match * the overlay width to the trigger width. */ - _getWidth(): number { - return this._getTriggerRect().width; + private _setTriggerWidth(): void { + this._triggerWidth = this._getTriggerRect().width; } /** Ensures the panel opens if activated by the keyboard. */