fix(module:select,tree-select): prevent pop the dropdown when click r…

…emove (#2290) * fix(module:select,tree-select): prevent pop the dropdown when click remove ref: - ant-design/ant-design#10274 - react-component/select#296 - react-component/tree-select#110 close #2276 * test(module:tree-select): fix test
NG-ZORRO · Oct 18, 2018 · 4fa9367 · 4fa9367
1 parent c24c5f6
commit 4fa9367
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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', () => {