Skip to content

Commit

Permalink
fix(module:select,tree-select): prevent pop the dropdown when click r…
Browse files Browse the repository at this point in the history
…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
  • Loading branch information
hsuanxyz authored and vthinkxie committed Oct 18, 2018
1 parent c24c5f6 commit 4fa9367
Show file tree
Hide file tree
Showing 7 changed files with 45 additions and 5 deletions.
3 changes: 2 additions & 1 deletion components/cascader/nz-cascader.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion components/select/nz-select-top-control.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
7 changes: 6 additions & 1 deletion components/select/nz-select-top-control.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
15 changes: 15 additions & 0 deletions components/select/nz-select.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -274,6 +288,7 @@ describe('nz-select component', () => {
fixture.detectChanges();
expect(testComponent.selectedValue.length).toBe(0);
}));

});
describe('form', () => {
let fixture;
Expand Down
2 changes: 1 addition & 1 deletion components/tree-select/nz-tree-select.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
7 changes: 6 additions & 1 deletion components/tree-select/nz-tree-select.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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 {
Expand Down
14 changes: 14 additions & 0 deletions components/tree-select/nz-tree-select.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down

0 comments on commit 4fa9367

Please sign in to comment.