From a9316a0b4f380d37d81d42e6cda9656527bed550 Mon Sep 17 00:00:00 2001 From: Nicolas Frizzarin Date: Fri, 17 Nov 2023 20:08:27 +0100 Subject: [PATCH] fix(module:select): input clear when nzAutoClear --- .gitignore | 2 + components/select/select.component.ts | 4 +- components/select/select.spec.ts | 72 +++++++++++++++++++++++++-- 3 files changed, 73 insertions(+), 5 deletions(-) diff --git a/.gitignore b/.gitignore index debb80337cd..3533f1c30f0 100644 --- a/.gitignore +++ b/.gitignore @@ -58,3 +58,5 @@ report.*.json Thumbs.db monospace.json + +.nx diff --git a/components/select/select.component.ts b/components/select/select.component.ts index b04827da1cb..5f12060fa28 100644 --- a/components/select/select.component.ts +++ b/components/select/select.component.ts @@ -500,7 +500,9 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon onOpenChange(): void { this.updateCdkConnectedOverlayStatus(); - this.clearInput(); + if (this.nzAutoClearSearchValue) { + this.clearInput(); + } } onInputValueChange(value: string): void { diff --git a/components/select/select.spec.ts b/components/select/select.spec.ts index 6cc3c800e44..fe7355d1589 100644 --- a/components/select/select.spec.ts +++ b/components/select/select.spec.ts @@ -1,16 +1,16 @@ import { BACKSPACE, DOWN_ARROW, ENTER, ESCAPE, SPACE, TAB, UP_ARROW } from '@angular/cdk/keycodes'; import { OverlayContainer } from '@angular/cdk/overlay'; import { ApplicationRef, Component, TemplateRef, ViewChild } from '@angular/core'; -import { ComponentFixture, TestBed, fakeAsync, flush, inject, tick } from '@angular/core/testing'; +import { ComponentFixture, fakeAsync, flush, inject, TestBed, tick } from '@angular/core/testing'; import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; import { - ɵComponentBed as ComponentBed, - ɵcreateComponentBed as createComponentBed, dispatchFakeEvent, dispatchKeyboardEvent, - dispatchMouseEvent + dispatchMouseEvent, + ɵComponentBed as ComponentBed, + ɵcreateComponentBed as createComponentBed } from 'ng-zorro-antd/core/testing'; import { NzSafeAny, NzStatus } from 'ng-zorro-antd/core/types'; import { NzFormControlStatusType, NzFormModule } from 'ng-zorro-antd/form'; @@ -586,6 +586,8 @@ describe('select', () => { let component: TestSelectTemplateMultipleComponent; let fixture: ComponentFixture; let selectElement!: HTMLElement; + let overlayContainerElement: HTMLElement; + beforeEach(() => { testBed = createComponentBed(TestSelectTemplateMultipleComponent, { imports: [NzSelectModule, NzIconTestModule, FormsModule] @@ -593,6 +595,7 @@ describe('select', () => { component = testBed.component; fixture = testBed.fixture; selectElement = testBed.debugElement.query(By.directive(NzSelectComponent)).nativeElement; + overlayContainerElement = TestBed.inject(OverlayContainer).getContainerElement(); }); it('should classname correct', () => { expect(selectElement.classList).toContain('ant-select-multiple'); @@ -773,6 +776,35 @@ describe('select', () => { flushRefresh(); expect(inputElement.value).toBe('test'); })); + it('should nzAutoClearSearchValue work when cdkOverlay send emit close', fakeAsync(() => { + const flushRefresh = (): void => { + fixture.detectChanges(); + flush(); + fixture.detectChanges(); + }; + component.nzOpen = true; + component.listOfOption = [ + { nzValue: 'test_01', nzLabel: 'test_01' }, + { nzValue: 'test_02', nzLabel: 'test_02' } + ]; + flushRefresh(); + const listOfContainerItem = document.querySelectorAll('nz-option-item'); + const inputElement = selectElement.querySelector('input')!; + inputElement.value = 'test'; + dispatchFakeEvent(inputElement, 'input'); + dispatchMouseEvent(listOfContainerItem[0], 'click'); + flushRefresh(); + expect(inputElement.value).toBe(''); + component.nzAutoClearSearchValue = false; + flushRefresh(); + inputElement.value = 'test'; + dispatchFakeEvent(inputElement, 'input'); + dispatchKeyboardEvent(overlayContainerElement, 'keydown', ESCAPE, overlayContainerElement); + fixture.detectChanges(); + flushRefresh(); + fixture.detectChanges(); + expect(inputElement.value).toBe('test'); + })); }); describe('tags template mode', () => { let testBed: ComponentBed; @@ -1079,6 +1111,8 @@ describe('select', () => { let component: TestSelectReactiveMultipleComponent; let fixture: ComponentFixture; let selectElement!: HTMLElement; + let overlayContainerElement: HTMLElement; + beforeEach(() => { testBed = createComponentBed(TestSelectReactiveMultipleComponent, { imports: [NzSelectModule, NzIconTestModule, FormsModule] @@ -1086,6 +1120,7 @@ describe('select', () => { component = testBed.component; fixture = testBed.fixture; selectElement = testBed.debugElement.query(By.directive(NzSelectComponent)).nativeElement; + overlayContainerElement = TestBed.inject(OverlayContainer).getContainerElement(); }); it('should ngModel works', fakeAsync(() => { component.listOfOption = [ @@ -1263,6 +1298,35 @@ describe('select', () => { flushRefresh(); expect(inputElement.value).toBe('test'); })); + it('should nzAutoClearSearchValue work when cdkOverlay send emit close', fakeAsync(() => { + const flushRefresh = (): void => { + fixture.detectChanges(); + flush(); + fixture.detectChanges(); + }; + component.nzOpen = true; + component.listOfOption = [ + { value: 'test_01', label: 'test_01' }, + { value: 'test_02', label: 'test_02' } + ]; + flushRefresh(); + const listOfContainerItem = document.querySelectorAll('nz-option-item'); + const inputElement = selectElement.querySelector('input')!; + inputElement.value = 'test'; + dispatchFakeEvent(inputElement, 'input'); + dispatchMouseEvent(listOfContainerItem[0], 'click'); + flushRefresh(); + expect(inputElement.value).toBe(''); + component.nzAutoClearSearchValue = false; + flushRefresh(); + inputElement.value = 'test'; + dispatchFakeEvent(inputElement, 'input'); + dispatchKeyboardEvent(overlayContainerElement, 'keydown', ESCAPE, overlayContainerElement); + fixture.detectChanges(); + flushRefresh(); + fixture.detectChanges(); + expect(inputElement.value).toBe('test'); + })); }); describe('tags reactive mode', () => { let testBed: ComponentBed;