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. */