fix(module:tree-select): should be not clearable when disabled or uns…

…elected (#5769) close #5603
NG-ZORRO · Sep 14, 2020 · baede4a · baede4a
1 parent 7adf199
commit baede4a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/components/tree-select/tree-select.component.ts b/components/tree-select/tree-select.component.ts
@@ -176,7 +176,7 @@ const TREE_SELECT_DEFAULT_CLASS = 'ant-select-dropdown ant-select-tree-dropdown'
 
       <nz-select-arrow *ngIf="!isMultiple"></nz-select-arrow>
 
-      <nz-select-clear *ngIf="nzAllowClear" (clear)="onClearSelection()"></nz-select-clear>
+      <nz-select-clear *ngIf="nzAllowClear && !nzDisabled && selectedNodes.length" (clear)="onClearSelection()"></nz-select-clear>
     </div>
   `,
   providers: [

diff --git a/components/tree-select/tree-select.spec.ts b/components/tree-select/tree-select.spec.ts
@@ -76,10 +76,18 @@ describe('tree-select component', () => {
       expect(treeSelect.nativeElement.classList).toContain('ant-select-lg');
     }));
     it('should allowClear work', () => {
-      expect(treeSelect.nativeElement.classList).not.toContain('ant-select-allow-clear');
+      const nativeElement = treeSelect.nativeElement as HTMLElement;
+      expect(nativeElement.classList).not.toContain('ant-select-allow-clear');
+      expect(nativeElement.querySelector('nz-select-clear')).toBeNull();
       testComponent.allowClear = true;
       fixture.detectChanges();
-      expect(treeSelect.nativeElement.classList).toContain('ant-select-allow-clear');
+      expect(nativeElement.classList).toContain('ant-select-allow-clear');
+      expect(nativeElement.querySelector('nz-select-clear')).not.toBeNull();
+
+      (nativeElement.querySelector('nz-select-clear') as HTMLElement)!.click();
+      fixture.detectChanges();
+
+      expect(nativeElement.querySelector('nz-select-clear')).toBeNull();
     });
     it('should click toggle open', () => {
       treeSelect.nativeElement.click();
@@ -451,12 +459,15 @@ describe('tree-select component', () => {
       fixture.detectChanges();
       flush();
       fixture.detectChanges();
-      expect(treeSelect.nativeElement.classList).not.toContain('ant-select-disabled');
+      const nativeElement = treeSelect.nativeElement as HTMLElement;
+      expect(nativeElement.classList).not.toContain('ant-select-disabled');
+      expect(nativeElement.querySelector('nz-select-clear')).not.toBeNull();
       testComponent.disable();
       fixture.detectChanges();
       flush();
       fixture.detectChanges();
-      expect(treeSelect.nativeElement.classList).toContain('ant-select-disabled');
+      expect(nativeElement.classList).toContain('ant-select-disabled');
+      expect(nativeElement.querySelector('nz-select-clear')).toBeNull();
     }));
 
     it('should set null value work', fakeAsync(() => {