diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts index a428799717e9..999aea097733 100644 --- a/src/lib/select/select.spec.ts +++ b/src/lib/select/select.spec.ts @@ -43,7 +43,8 @@ describe('MdSelect', () => { ThrowsErrorOnInit, BasicSelectOnPush, BasicSelectOnPushPreselected, - SelectWithPlainTabindex + SelectWithPlainTabindex, + BasicSelectNoPlaceholder ], providers: [ {provide: OverlayContainer, useFactory: () => { @@ -150,11 +151,27 @@ describe('MdSelect', () => { fixture.whenStable().then(() => { trigger.click(); fixture.detectChanges(); + const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; expect(pane.style.minWidth).toBe('200px'); }); })); + 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); + }); + })); + it('should not attempt to open a select that does not have any options', () => { fixture.componentInstance.foods = []; fixture.detectChanges(); @@ -1893,6 +1910,16 @@ class MultiSelect { }) class SelectWithPlainTabindex { } +@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 32915f501b2c..ad31d020c69d 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -308,6 +308,11 @@ export class MdSelect implements AfterContentInit, ControlValueAccessor, OnDestr this._selectionModel = new SelectionModel(this.multiple, null, false); this._initKeyManager(); + // If there is no placeholder, the setter won't fire so we need to trigger it from here. + if (!this._placeholder) { + this._triggerWidth = this._getWidth(); + } + this._changeSubscription = this.options.changes.startWith(null).subscribe(() => { this._resetOptions();