diff --git a/src/lib/core/overlay/overlay-directives.spec.ts b/src/lib/core/overlay/overlay-directives.spec.ts index 26368a112a7b..478ce981b12d 100644 --- a/src/lib/core/overlay/overlay-directives.spec.ts +++ b/src/lib/core/overlay/overlay-directives.spec.ts @@ -107,6 +107,15 @@ describe('Overlay directives', () => { const pane = overlayContainerElement.children[0] as HTMLElement; expect(pane.style.width).toEqual('250px'); + + fixture.componentInstance.isOpen = false; + fixture.detectChanges(); + + fixture.componentInstance.width = 500; + fixture.componentInstance.isOpen = true; + fixture.detectChanges(); + + expect(pane.style.width).toEqual('500px'); }); it('should set the height', () => { @@ -116,6 +125,15 @@ describe('Overlay directives', () => { const pane = overlayContainerElement.children[0] as HTMLElement; expect(pane.style.height).toEqual('100vh'); + + fixture.componentInstance.isOpen = false; + fixture.detectChanges(); + + fixture.componentInstance.height = '50vh'; + fixture.componentInstance.isOpen = true; + fixture.detectChanges(); + + expect(pane.style.height).toEqual('50vh'); }); it('should set the min width', () => { @@ -125,6 +143,15 @@ describe('Overlay directives', () => { const pane = overlayContainerElement.children[0] as HTMLElement; expect(pane.style.minWidth).toEqual('250px'); + + fixture.componentInstance.isOpen = false; + fixture.detectChanges(); + + fixture.componentInstance.minWidth = 500; + fixture.componentInstance.isOpen = true; + fixture.detectChanges(); + + expect(pane.style.minWidth).toEqual('500px'); }); it('should set the min height', () => { @@ -134,6 +161,15 @@ describe('Overlay directives', () => { const pane = overlayContainerElement.children[0] as HTMLElement; expect(pane.style.minHeight).toEqual('500px'); + + fixture.componentInstance.isOpen = false; + fixture.detectChanges(); + + fixture.componentInstance.minHeight = 500; + fixture.componentInstance.isOpen = true; + fixture.detectChanges(); + + expect(pane.style.minHeight).toEqual('500px'); }); it('should create the backdrop if designated', () => { diff --git a/src/lib/core/overlay/overlay-directives.ts b/src/lib/core/overlay/overlay-directives.ts index e643256c11cf..1f317f163d85 100644 --- a/src/lib/core/overlay/overlay-directives.ts +++ b/src/lib/core/overlay/overlay-directives.ts @@ -185,6 +185,22 @@ export class ConnectedOverlayDirective implements OnDestroy { private _buildConfig(): OverlayState { let overlayConfig = new OverlayState(); + this._configureState(overlayConfig); + + overlayConfig.hasBackdrop = this.hasBackdrop; + + if (this.backdropClass) { + overlayConfig.backdropClass = this.backdropClass; + } + + this._position = this._createPositionStrategy() as ConnectedPositionStrategy; + overlayConfig.positionStrategy = this._position; + + return overlayConfig; + } + + /** Configure the overlay state based on the directive's inputs */ + private _configureState(overlayConfig: OverlayState): void { if (this.width || this.width === 0) { overlayConfig.width = this.width; } @@ -200,17 +216,6 @@ export class ConnectedOverlayDirective implements OnDestroy { if (this.minHeight || this.minHeight === 0) { overlayConfig.minHeight = this.minHeight; } - - overlayConfig.hasBackdrop = this.hasBackdrop; - - if (this.backdropClass) { - overlayConfig.backdropClass = this.backdropClass; - } - - this._position = this._createPositionStrategy() as ConnectedPositionStrategy; - overlayConfig.positionStrategy = this._position; - - return overlayConfig; } /** Returns the position strategy of the overlay to be set on the overlay config */ @@ -249,6 +254,8 @@ export class ConnectedOverlayDirective implements OnDestroy { this._position.withDirection(this.dir); this._overlayRef.getState().direction = this.dir; + /** Update the overlay state, in case the directive's inputs have changed */ + this._configureState(this._overlayRef.getState()); if (!this._overlayRef.hasAttached()) { this._overlayRef.attach(this._templatePortal); diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts index a428799717e9..7e62dce94afd 100644 --- a/src/lib/select/select.spec.ts +++ b/src/lib/select/select.spec.ts @@ -11,7 +11,9 @@ import { } from '@angular/core'; import {MdSelectModule} from './index'; import {OverlayContainer} from '../core/overlay/overlay-container'; -import {MdSelect, MdSelectFloatPlaceholderType} from './select'; +import { + MdSelect, MdSelectFloatPlaceholderType, SELECT_MULTIPLE_PANEL_PADDING_X, SELECT_PANEL_PADDING_X +} from './select'; import {MdSelectDynamicMultipleError, MdSelectNonArrayValueError} from './select-errors'; import {MdOption} from '../core/option/option'; import {Dir} from '../core/rtl/dir'; @@ -151,7 +153,7 @@ describe('MdSelect', () => { trigger.click(); fixture.detectChanges(); const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; - expect(pane.style.minWidth).toBe('200px'); + expect(pane.style.minWidth).toBe((200 + SELECT_PANEL_PADDING_X) + 'px'); }); })); @@ -1302,7 +1304,7 @@ describe('MdSelect', () => { fixture.detectChanges(); const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; - expect(pane.style.minWidth).toEqual('300px'); + expect(pane.style.minWidth).toEqual((300 + SELECT_PANEL_PADDING_X) + 'px'); expect(fixture.componentInstance.select.panelOpen).toBe(true); expect(overlayContainerElement.textContent).toContain('Steak'); @@ -1593,6 +1595,17 @@ describe('MdSelect', () => { }); })); + it('should set the width of the overlay based on the trigger', async(() => { + trigger.style.width = '200px'; + + fixture.whenStable().then(() => { + trigger.click(); + fixture.detectChanges(); + const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; + expect(pane.style.minWidth).toBe((200 + SELECT_MULTIPLE_PANEL_PADDING_X) + 'px'); + }); + })); + }); }); diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts index 32915f501b2c..8ebbe26d583e 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -342,6 +342,11 @@ export class MdSelect implements AfterContentInit, ControlValueAccessor, OnDestr return; } this._calculateOverlayPosition(); + /** + * Update the trigger width, in case the select width has changed + * Taking into account the "offsetX"/"dir" to fit it better. + */ + this._triggerWidth = this._getWidth() + (this._offsetX * (!this._isRtl() ? -1 : 1)); this._placeholderState = this._floatPlaceholderState(); this._panelOpen = true; }