fix(module:select,tree-select): prevent pop the dropdown when close c…

…licka ref: - ant-design/ant-design#10274 - react-component/select#296 - react-component/tree-select#110 close NG-ZORRO#2276
hsuanxyz · Oct 17, 2018 · 51cf722 · 51cf722
1 parent 648da35
commit 51cf722
Show file tree

Hide file tree

Showing 5 changed files with 16 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/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 {