fix(module:tree-select): fix search box exception when Chinese search (…

…#8324) * fix(module:tree-select): fix search box exception when Chinese search * chore: 添加单元测试 * chore: chore * chore: 优化tree-select测试 * chore: 调整测试 * chore: chore
NG-ZORRO · Jan 22, 2024 · aacd62b · aacd62b
1 parent 936317e
commit aacd62b
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 8 deletions.
diff --git a/components/tree-select/tree-select.component.ts b/components/tree-select/tree-select.component.ts
@@ -33,8 +33,8 @@ import {
   ViewChild
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { merge, of as observableOf, Subject } from 'rxjs';
-import { distinctUntilChanged, filter, map, takeUntil, tap, withLatestFrom } from 'rxjs/operators';
+import { combineLatest, merge, of as observableOf, Subject } from 'rxjs';
+import { distinctUntilChanged, filter, map, startWith, takeUntil, tap, withLatestFrom } from 'rxjs/operators';
 
 import { slideMotion } from 'ng-zorro-antd/core/animation';
 import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
@@ -169,7 +169,7 @@ const listOfPositions = [
         [nzId]="nzId"
         [showInput]="nzShowSearch"
         (keydown)="onKeyDownInput($event)"
-        (isComposingChange)="isComposing = $event"
+        (isComposingChange)="isComposingChange($event)"
         (valueChange)="setInputValue($event)"
         [value]="inputValue"
         [mirrorSync]="isMultiple"
@@ -352,6 +352,9 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
   private destroy$ = new Subject<void>();
   private isNzDisableFirstChange: boolean = true;
 
+  private isComposingChange$ = new Subject<boolean>();
+  private searchValueChange$ = new Subject<string>();
+
   onChange: OnChangeType = _value => {};
   onTouched: OnTouchedType = () => {};
 
@@ -419,6 +422,17 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
           this.cdr.markForCheck();
         }
       });
+
+    // setInputValue method executed earlier than isComposingChange
+    combineLatest([this.searchValueChange$, this.isComposingChange$.pipe(startWith(false))])
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(([searchValue, isComposing]) => {
+        this.isComposing = isComposing;
+        if (!isComposing) {
+          this.inputValue = searchValue;
+          this.updatePosition();
+        }
+      });
   }
 
   ngOnDestroy(): void {
@@ -429,7 +443,7 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
   }
 
   isComposingChange(isComposing: boolean): void {
-    this.isComposing = isComposing;
+    this.isComposingChange$.next(isComposing);
   }
 
   setDisabledState(isDisabled: boolean): void {
@@ -568,10 +582,7 @@ export class NzTreeSelectComponent extends NzTreeBase implements ControlValueAcc
   }
 
   setInputValue(value: string): void {
-    if (!this.isComposing) {
-      this.inputValue = value;
-      this.updatePosition();
-    }
+    this.searchValueChange$.next(value);
   }
 
   removeSelected(node: NzTreeNode, emit: boolean = true): void {

diff --git a/components/tree-select/tree-select.spec.ts b/components/tree-select/tree-select.spec.ts
@@ -349,6 +349,15 @@ describe('tree-select component', () => {
       fixture.detectChanges();
       expect(overlayContainerElement.children[0].classList).toContain('cdk-overlay-backdrop');
     }));
+
+    it('should isComposing/inputValue is correct', fakeAsync(() => {
+      treeSelectComponent.inputValue = '';
+      treeSelectComponent.isComposingChange(true);
+      treeSelectComponent.setInputValue('1011');
+      flush();
+      expect(treeSelectComponent.isComposing).toBe(true);
+      expect(treeSelectComponent.inputValue).toBe('');
+    }));
   });
 
   describe('checkable', () => {