fix(module:select): input clear when nzAutoClear (#8167)

NG-ZORRO · Nov 30, 2023 · fefcb68 · fefcb68
1 parent e37eab2
commit fefcb68
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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,13 +586,16 @@ describe('select', () => {
     let component: TestSelectTemplateMultipleComponent;
     let fixture: ComponentFixture<TestSelectTemplateMultipleComponent>;
     let selectElement!: HTMLElement;
+    let overlayContainerElement: HTMLElement;
+
     beforeEach(() => {
       testBed = createComponentBed(TestSelectTemplateMultipleComponent, {
         imports: [NzSelectModule, NzIconTestModule, FormsModule]
       });
       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<TestSelectTemplateTagsComponent>;
@@ -1079,13 +1111,16 @@ describe('select', () => {
     let component: TestSelectReactiveMultipleComponent;
     let fixture: ComponentFixture<TestSelectReactiveMultipleComponent>;
     let selectElement!: HTMLElement;
+    let overlayContainerElement: HTMLElement;
+
     beforeEach(() => {
       testBed = createComponentBed(TestSelectReactiveMultipleComponent, {
         imports: [NzSelectModule, NzIconTestModule, FormsModule]
       });
       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<TestSelectReactiveTagsComponent>;