diff --git a/components/tree-select/nz-tree-select.component.ts b/components/tree-select/nz-tree-select.component.ts index b211bc64670..1f43e0b1d24 100644 --- a/components/tree-select/nz-tree-select.component.ts +++ b/components/tree-select/nz-tree-select.component.ts @@ -96,7 +96,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; @@ -371,6 +371,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 index 35d12a3b582..fb4a0a0c2de 100644 --- 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: `