From 07df29b79e4f543ba2dafa812b8fd96cd632e84d Mon Sep 17 00:00:00 2001 From: crisbeto Date: Thu, 31 May 2018 10:52:49 +0300 Subject: [PATCH] fix(overlay): unable to reset overlay size properties to initial value Fixes the consumer not being able to remove the various overlay sizing properties by setting them to null/an empty string, after they're added, without recreating the overlay. Note that these changes would technically let something like `false` through, but these cases will be caught by TS. --- src/cdk/overlay/overlay-ref.ts | 31 +++++------------ src/cdk/overlay/overlay.spec.ts | 59 ++++++++++++++++++++++++++------- 2 files changed, 55 insertions(+), 35 deletions(-) diff --git a/src/cdk/overlay/overlay-ref.ts b/src/cdk/overlay/overlay-ref.ts index 390ff88e6a2a..6db556d858b7 100644 --- a/src/cdk/overlay/overlay-ref.ts +++ b/src/cdk/overlay/overlay-ref.ts @@ -264,29 +264,14 @@ export class OverlayRef implements PortalOutlet { /** Updates the size of the overlay element based on the overlay config. */ private _updateElementSize() { - if (this._config.width || this._config.width === 0) { - this._pane.style.width = coerceCssPixelValue(this._config.width); - } - - if (this._config.height || this._config.height === 0) { - this._pane.style.height = coerceCssPixelValue(this._config.height); - } - - if (this._config.minWidth || this._config.minWidth === 0) { - this._pane.style.minWidth = coerceCssPixelValue(this._config.minWidth); - } - - if (this._config.minHeight || this._config.minHeight === 0) { - this._pane.style.minHeight = coerceCssPixelValue(this._config.minHeight); - } - - if (this._config.maxWidth || this._config.maxWidth === 0) { - this._pane.style.maxWidth = coerceCssPixelValue(this._config.maxWidth); - } - - if (this._config.maxHeight || this._config.maxHeight === 0) { - this._pane.style.maxHeight = coerceCssPixelValue(this._config.maxHeight); - } + const style = this._pane.style; + + style.width = coerceCssPixelValue(this._config.width); + style.height = coerceCssPixelValue(this._config.height); + style.minWidth = coerceCssPixelValue(this._config.minWidth); + style.minHeight = coerceCssPixelValue(this._config.minHeight); + style.maxWidth = coerceCssPixelValue(this._config.maxWidth); + style.maxHeight = coerceCssPixelValue(this._config.maxHeight); } /** Toggles the pointer events for the overlay pane element. */ diff --git a/src/cdk/overlay/overlay.spec.ts b/src/cdk/overlay/overlay.spec.ts index fb416699bc3b..0d5333faa7f9 100644 --- a/src/cdk/overlay/overlay.spec.ts +++ b/src/cdk/overlay/overlay.spec.ts @@ -165,7 +165,7 @@ describe('Overlay', () => { overlayRef.attach(componentPortal); - expect(overlayRef.hostElement.getAttribute('dir')).toEqual('rtl'); + expect(overlayRef.hostElement.getAttribute('dir')).toBe('rtl'); }); it('should emit when an overlay is attached', () => { @@ -375,7 +375,7 @@ describe('Overlay', () => { const overlayRef = overlay.create(config); overlayRef.attach(componentPortal); - expect(overlayRef.overlayElement.style.width).toEqual('500px'); + expect(overlayRef.overlayElement.style.width).toBe('500px'); }); it('should support using other units if a string width is provided', () => { @@ -384,7 +384,7 @@ describe('Overlay', () => { const overlayRef = overlay.create(config); overlayRef.attach(componentPortal); - expect(overlayRef.overlayElement.style.width).toEqual('200%'); + expect(overlayRef.overlayElement.style.width).toBe('200%'); }); it('should apply the height set in the config', () => { @@ -393,7 +393,7 @@ describe('Overlay', () => { const overlayRef = overlay.create(config); overlayRef.attach(componentPortal); - expect(overlayRef.overlayElement.style.height).toEqual('500px'); + expect(overlayRef.overlayElement.style.height).toBe('500px'); }); it('should support using other units if a string height is provided', () => { @@ -402,7 +402,7 @@ describe('Overlay', () => { const overlayRef = overlay.create(config); overlayRef.attach(componentPortal); - expect(overlayRef.overlayElement.style.height).toEqual('100vh'); + expect(overlayRef.overlayElement.style.height).toBe('100vh'); }); it('should apply the min width set in the config', () => { @@ -411,17 +411,16 @@ describe('Overlay', () => { const overlayRef = overlay.create(config); overlayRef.attach(componentPortal); - expect(overlayRef.overlayElement.style.minWidth).toEqual('200px'); + expect(overlayRef.overlayElement.style.minWidth).toBe('200px'); }); - it('should apply the min height set in the config', () => { config.minHeight = 500; const overlayRef = overlay.create(config); overlayRef.attach(componentPortal); - expect(overlayRef.overlayElement.style.minHeight).toEqual('500px'); + expect(overlayRef.overlayElement.style.minHeight).toBe('500px'); }); it('should apply the max width set in the config', () => { @@ -430,7 +429,7 @@ describe('Overlay', () => { const overlayRef = overlay.create(config); overlayRef.attach(componentPortal); - expect(overlayRef.overlayElement.style.maxWidth).toEqual('200px'); + expect(overlayRef.overlayElement.style.maxWidth).toBe('200px'); }); @@ -440,7 +439,7 @@ describe('Overlay', () => { const overlayRef = overlay.create(config); overlayRef.attach(componentPortal); - expect(overlayRef.overlayElement.style.maxHeight).toEqual('500px'); + expect(overlayRef.overlayElement.style.maxHeight).toBe('500px'); }); it('should support zero widths and heights', () => { @@ -450,9 +449,45 @@ describe('Overlay', () => { const overlayRef = overlay.create(config); overlayRef.attach(componentPortal); - expect(overlayRef.overlayElement.style.width).toEqual('0px'); - expect(overlayRef.overlayElement.style.height).toEqual('0px'); + expect(overlayRef.overlayElement.style.width).toBe('0px'); + expect(overlayRef.overlayElement.style.height).toBe('0px'); }); + + it('should be able to reset the various size properties', () => { + config.minWidth = config.minHeight = 100; + config.width = config.height = 200; + config.maxWidth = config.maxHeight = 300; + + const overlayRef = overlay.create(config); + overlayRef.attach(componentPortal); + const style = overlayRef.overlayElement.style; + + expect(style.minWidth).toBe('100px'); + expect(style.minHeight).toBe('100px'); + expect(style.width).toBe('200px'); + expect(style.height).toBe('200px'); + expect(style.maxWidth).toBe('300px'); + expect(style.maxHeight).toBe('300px'); + + overlayRef.updateSize({ + minWidth: '', + minHeight: '', + width: '', + height: '', + maxWidth: '', + maxHeight: '' + }); + + overlayRef.updatePosition(); + + expect(style.minWidth).toBeFalsy(); + expect(style.minHeight).toBeFalsy(); + expect(style.width).toBeFalsy(); + expect(style.height).toBeFalsy(); + expect(style.maxWidth).toBeFalsy(); + expect(style.maxHeight).toBeFalsy(); + }); + }); describe('backdrop', () => {