fix(module:tree-select): width is 0 when trigger element is invisible (…

…NG-ZORRO#1775) close NG-ZORRO#1772
hsuanxyz · Jul 2, 2018 · 0e42397 · 0e42397
1 parent 8df9359
commit 0e42397
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git a/components/tree-select/nz-tree-select.component.ts b/components/tree-select/nz-tree-select.component.ts
@@ -94,7 +94,7 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
   @Input() nzOpen = false;
   @Input() nzAllowClear = true;
   @Input() nzSize = 'default';
-  @Input() nzDropdownMatchSelectWidth = false;
+  @Input() nzDropdownMatchSelectWidth = true;
   @Input() nzPlaceHolder = '';
   @Input() nzShowSearch = true;
   @Input() nzDisabled = false;
@@ -367,6 +367,13 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
   }
 
   updateCdkConnectedOverlayStatus(): void {
+    const overlayWidth = this.treeSelect.nativeElement.getBoundingClientRect().width;
+    if (this.nzDropdownMatchSelectWidth) {
+      this.overlayRef.updateSize({ width: overlayWidth });
+    } else {
+      this.overlayRef.updateSize({ minWidth: overlayWidth });
+    }
+
     if (this.nzOpen) {
       this.renderer.removeStyle(this.overlayRef.backdropElement, 'display');
     } else {

diff --git a/components/tree-select/nz-tree-select.spec.ts b/components/tree-select/nz-tree-select.spec.ts
@@ -100,6 +100,23 @@ describe('tree-select component', () => {
       fixture.detectChanges();
       tick();
     }));
+    it('should dropdownMatchSelectWidth work', fakeAsync(() => {
+      testComponent.dropdownMatchSelectWidth = true;
+      fixture.detectChanges();
+      treeSelect.nativeElement.click();
+      fixture.detectChanges();
+      expect(treeSelectComponent.nzOpen).toBe(true);
+      const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+      expect(overlayPane.style.width).toBe('250px');
+      treeSelectComponent.closeDropDown();
+      fixture.detectChanges();
+      testComponent.dropdownMatchSelectWidth = false;
+      fixture.detectChanges();
+      treeSelect.nativeElement.click();
+      fixture.detectChanges();
+      expect(treeSelectComponent.nzOpen).toBe(true);
+      expect(overlayPane.style.minWidth).toBe('250px');
+    }));
     it('should clear value work', fakeAsync(() => {
       testComponent.allowClear = true;
       fixture.detectChanges();
@@ -323,7 +340,7 @@ describe('tree-select component', () => {
   selector: 'nz-test-tree-select-basic',
   template: `
     <nz-tree-select
-      style="width: 250px"
+      style="width:250px;position: relative;display: block;"
       nzPlaceHolder="Please select"
       [nzDefaultExpandedKeys]="expandKeys"
       [nzNodes]="nodes"