From bdc9e8244bbc48f32e8521be741055f374b9c71d Mon Sep 17 00:00:00 2001 From: emoralesb05 Date: Sun, 12 Mar 2017 20:07:23 -0700 Subject: [PATCH 1/4] fix(autocomplete): update overlay ref width on menu trigger when changing the width of the `host` (or using flex box) the `div.cdk-overlay-pane` kept the width of the host when it was first created --- src/lib/autocomplete/autocomplete-trigger.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts index 1b773673e843..2b0b278b5d5f 100644 --- a/src/lib/autocomplete/autocomplete-trigger.ts +++ b/src/lib/autocomplete/autocomplete-trigger.ts @@ -121,6 +121,9 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy { openPanel(): void { if (!this._overlayRef) { this._createOverlay(); + } else { + /** Gets width of host incase this has changed, and updated the Overlay reference */ + this._overlayRef.getState().width = this._getHostWidth(); } if (!this._overlayRef.hasAttached()) { From a0fbcf4ca6596d9405ba65c228cc6f71e6671dcf Mon Sep 17 00:00:00 2001 From: emoralesb05 Date: Mon, 13 Mar 2017 07:30:19 -0700 Subject: [PATCH 2/4] chore(autocomplete): add pane width unit test --- src/lib/autocomplete/autocomplete.spec.ts | 27 ++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts index 78eb4a4b118c..8fc7b067a674 100644 --- a/src/lib/autocomplete/autocomplete.spec.ts +++ b/src/lib/autocomplete/autocomplete.spec.ts @@ -938,11 +938,35 @@ describe('MdAutocomplete', () => { })); }); + + it('should have correct width when opened', () => { + const widthFixture = TestBed.createComponent(SimpleAutocomplete); + widthFixture.componentInstance.width = 300; + widthFixture.detectChanges(); + + widthFixture.componentInstance.trigger.openPanel(); + widthFixture.detectChanges(); + + const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; + expect(overlayPane.style.width).toEqual('300px'); + + widthFixture.componentInstance.trigger.closePanel(); + widthFixture.detectChanges(); + + widthFixture.componentInstance.width = 500; + widthFixture.detectChanges(); + + widthFixture.componentInstance.trigger.openPanel(); + widthFixture.detectChanges(); + + expect(overlayPane.style.width).toEqual('500px'); + + }); }); @Component({ template: ` - + @@ -958,6 +982,7 @@ class SimpleAutocomplete implements OnDestroy { filteredStates: any[]; valueSub: Subscription; placeholder = 'auto'; + width: number; @ViewChild(MdAutocompleteTrigger) trigger: MdAutocompleteTrigger; @ViewChild(MdAutocomplete) panel: MdAutocomplete; From f02eb801744a880fea53b510763b1588ceb7eae8 Mon Sep 17 00:00:00 2001 From: emoralesb05 Date: Mon, 13 Mar 2017 11:42:21 -0700 Subject: [PATCH 3/4] chore(): parse and round width since firefox and edge return a decimal width --- src/lib/autocomplete/autocomplete.spec.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts index 8fc7b067a674..0456a71acbd8 100644 --- a/src/lib/autocomplete/autocomplete.spec.ts +++ b/src/lib/autocomplete/autocomplete.spec.ts @@ -948,7 +948,8 @@ describe('MdAutocomplete', () => { widthFixture.detectChanges(); const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; - expect(overlayPane.style.width).toEqual('300px'); + // Firefox, edge return a decimal value for width, so we need to parse and round it to verify + expect(Math.ceil(parseFloat(overlayPane.style.width))).toEqual(300); widthFixture.componentInstance.trigger.closePanel(); widthFixture.detectChanges(); @@ -959,7 +960,8 @@ describe('MdAutocomplete', () => { widthFixture.componentInstance.trigger.openPanel(); widthFixture.detectChanges(); - expect(overlayPane.style.width).toEqual('500px'); + // Firefox, edge return a decimal value for width, so we need to parse and round it to verify + expect(Math.ceil(parseFloat(overlayPane.style.width))).toEqual(500); }); }); From 2a81c9a960d4c4624299aee3cf619eea913ed932 Mon Sep 17 00:00:00 2001 From: emoralesb05 Date: Mon, 13 Mar 2017 11:55:32 -0700 Subject: [PATCH 4/4] chore(): update comment to make it more understandable --- src/lib/autocomplete/autocomplete-trigger.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts index 2b0b278b5d5f..34f3ee091403 100644 --- a/src/lib/autocomplete/autocomplete-trigger.ts +++ b/src/lib/autocomplete/autocomplete-trigger.ts @@ -122,7 +122,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy { if (!this._overlayRef) { this._createOverlay(); } else { - /** Gets width of host incase this has changed, and updated the Overlay reference */ + /** Update the panel width, in case the host width has changed */ this._overlayRef.getState().width = this._getHostWidth(); }