From 4fa93673803d0279589f0448cc17158276beb9d9 Mon Sep 17 00:00:00 2001
From: Hsuan Lee <HsuanGM@gmail.com>
Date: Thu, 18 Oct 2018 20:25:50 +0800
Subject: [PATCH] fix(module:select,tree-select): prevent pop the dropdown when
 click remove (#2290)

* fix(module:select,tree-select): prevent pop the dropdown when click remove

ref:
- https://github.com/ant-design/ant-design/issues/10274
- https://github.com/react-component/select/pull/296
- https://github.com/react-component/tree-select/pull/110

close #2276

* test(module:tree-select): fix test
---
 components/cascader/nz-cascader.component.html    |  3 ++-
 .../select/nz-select-top-control.component.html   |  2 +-
 .../select/nz-select-top-control.component.ts     |  7 ++++++-
 components/select/nz-select.spec.ts               | 15 +++++++++++++++
 .../tree-select/nz-tree-select.component.html     |  2 +-
 .../tree-select/nz-tree-select.component.ts       |  7 ++++++-
 components/tree-select/nz-tree-select.spec.ts     | 14 ++++++++++++++
 7 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/components/cascader/nz-cascader.component.html b/components/cascader/nz-cascader.component.html
index 40fbbbc46b6..6b48651d3bc 100644
--- a/components/cascader/nz-cascader.component.html
+++ b/components/cascader/nz-cascader.component.html
@@ -18,7 +18,8 @@
       (change)="handlerInputChange($event)">
     <i *ngIf="showClearIcon"
       nz-icon
-      type="close"
+      type="close-circle"
+      theme="fill"
       [ngClass]="clearCls"
       [attr.title]="nzClearText"
       (click)="clearSelection($event)"></i>
diff --git a/components/select/nz-select-top-control.component.html b/components/select/nz-select-top-control.component.html
index 5c50dc032e1..e44c2165934 100644
--- a/components/select/nz-select-top-control.component.html
+++ b/components/select/nz-select-top-control.component.html
@@ -47,7 +47,7 @@
       [class.ant-select-selection__choice__disabled]="getPropertyFromValue(value,'nzDisabled')"
       class="ant-select-selection__choice">
       <div class="ant-select-selection__choice__content">{{ getPropertyFromValue(value, 'nzLabel') || value }}</div>
-      <span *ngIf="!getPropertyFromValue(value,'nzDisabled')" class="ant-select-selection__choice__remove" (click)="removeValueFormSelected(value)">
+      <span *ngIf="!getPropertyFromValue(value,'nzDisabled')" class="ant-select-selection__choice__remove" (click)="removeValueFormSelected(value, $event)">
         <i nz-icon type="close" class="ant-select-remove-icon"></i>
       </span>
     </li>
diff --git a/components/select/nz-select-top-control.component.ts b/components/select/nz-select-top-control.component.ts
index 5c8db31ab23..1497533991b 100644
--- a/components/select/nz-select-top-control.component.ts
+++ b/components/select/nz-select-top-control.component.ts
@@ -151,12 +151,17 @@ export class NzSelectTopControlComponent {
   }
 
   // tslint:disable-next-line:no-any
-  removeValueFormSelected(value: any): void {
+  removeValueFormSelected(value: any, event?: MouseEvent): void {
     if (this.nzDisabled || this.getPropertyFromValue(value, 'nzDisabled')) {
       return;
     }
     this._listOfSelectedValue = this.nzListOfSelectedValue.filter(item => item !== value);
     this.nzListOfSelectedValueChange.emit(this.nzListOfSelectedValue);
+
+    // Do not trigger the popup
+    if (event && event.stopPropagation) {
+      event.stopPropagation();
+    }
   }
 
   updateWidth(): void {
diff --git a/components/select/nz-select.spec.ts b/components/select/nz-select.spec.ts
index e25207315f0..435a978c706 100644
--- a/components/select/nz-select.spec.ts
+++ b/components/select/nz-select.spec.ts
@@ -266,6 +266,20 @@ describe('nz-select component', () => {
       expect(testComponent.selectedValue.length).toBe(1);
       expect(testComponent.selectedValue[ 0 ]).toBe('jack');
     });
+    it('should prevent open the dropdown when click remove', fakeAsync(() => {
+      fixture.detectChanges();
+      testComponent.nzSelectComponent.updateListOfSelectedValueFromTopControl([ 'jack' ]);
+      fixture.detectChanges();
+      expect(testComponent.selectedValue.length).toBe(1);
+      expect(testComponent.selectedValue[ 0 ]).toBe('jack');
+      select.nativeElement.querySelector('.ant-select-selection__choice__remove').click();
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+      expect(testComponent.selectedValue.length).toBe(0);
+      expect(testComponent.nzSelectComponent.nzOpen).toBe(false);
+
+    }));
     it('should clear work', fakeAsync(() => {
       fixture.detectChanges();
       select.nativeElement.querySelector('.ant-select-selection__clear').click();
@@ -274,6 +288,7 @@ describe('nz-select component', () => {
       fixture.detectChanges();
       expect(testComponent.selectedValue.length).toBe(0);
     }));
+
   });
   describe('form', () => {
     let fixture;
diff --git a/components/tree-select/nz-tree-select.component.html b/components/tree-select/nz-tree-select.component.html
index 27758aeb7a9..ea0ea3c158c 100644
--- a/components/tree-select/nz-tree-select.component.html
+++ b/components/tree-select/nz-tree-select.component.html
@@ -84,7 +84,7 @@
           [attr.title]="nzDisplayWith(node)"
           [class.ant-select-selection__choice__disabled]="node.isDisabled"
           class="ant-select-selection__choice">
-               <span *ngIf="!node.isDisabled" class="ant-select-selection__choice__remove" (click)="removeSelected(node)">
+               <span *ngIf="!node.isDisabled" class="ant-select-selection__choice__remove" (click)="removeSelected(node, true, $event)">
                  <i nz-icon type="close" class="ant-select-remove-icon"></i>
                </span>
           <span class="ant-select-selection__choice__content">{{ nzDisplayWith(node) }}</span>
diff --git a/components/tree-select/nz-tree-select.component.ts b/components/tree-select/nz-tree-select.component.ts
index 7e3086aec87..0b6dcbb0a55 100644
--- a/components/tree-select/nz-tree-select.component.ts
+++ b/components/tree-select/nz-tree-select.component.ts
@@ -239,7 +239,7 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
     }
   }
 
-  removeSelected(node: NzTreeNode, emit: boolean = true): void {
+  removeSelected(node: NzTreeNode, emit: boolean = true, event?: MouseEvent): void {
     node.isSelected = false;
     node.isChecked = false;
     if (this.nzCheckable) {
@@ -251,6 +251,11 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, Afte
     if (emit) {
       this.nzRemoved.emit(node);
     }
+
+    // Do not trigger the popup
+    if (event && event.stopPropagation) {
+      event.stopPropagation();
+    }
   }
 
   focusOnInput(): void {
diff --git a/components/tree-select/nz-tree-select.spec.ts b/components/tree-select/nz-tree-select.spec.ts
index 891d3647df4..d3802741bda 100644
--- a/components/tree-select/nz-tree-select.spec.ts
+++ b/components/tree-select/nz-tree-select.spec.ts
@@ -299,6 +299,20 @@ describe('tree-select component', () => {
       flush();
       expect(treeSelectComponent.nzOpen).toBe(true);
     }));
+
+    it('should prevent open the dropdown when click remove', fakeAsync(() => {
+      testComponent.value = ['1000122'];
+      fixture.detectChanges();
+      tick(200);
+      fixture.detectChanges();
+      expect(treeSelectComponent.selectedNodes.length).toBe(1);
+      treeSelect.nativeElement.querySelector('.ant-select-selection__choice__remove').click();
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+      expect(treeSelectComponent.selectedNodes.length).toBe(0);
+      expect(treeSelectComponent.nzOpen).toBe(false);
+    }));
   });
 
   describe('form', () => {