fix(module:cascader): hide placeholder when trigger compositionstart event (#8641)

* fix(module:cascader): hide placeholder when trigger compositionstart

* refactor(module:cascader): rename test unit fake event name

Author: Zz-ZzzZ

components/cascader/cascader.component.ts

@@ -95,6 +95,8 @@ const defaultDisplayRender = (labels: string[]): string => labels.join(' / ');
               [(ngModel)]="inputValue"
               (blur)="handleInputBlur()"
               (focus)="handleInputFocus()"
+              (compositionstart)="handleInputCompositionstart()"
+              (compositionend)="handleInputCompositionend()"
             />
           </span>
           @if (showLabelRender) {
@@ -109,9 +111,11 @@ const defaultDisplayRender = (labels: string[]): string => labels.join(' / ');
               }
             </span>
           } @else {
-            <span class="ant-select-selection-placeholder" [style.visibility]="!inputValue ? 'visible' : 'hidden'">{{
-              showPlaceholder ? nzPlaceHolder || locale?.placeholder : null
-            }}</span>
+            <span
+              class="ant-select-selection-placeholder"
+              [style.visibility]="isComposing || inputValue ? 'hidden' : 'visible'"
+              >{{ showPlaceholder ? nzPlaceHolder || locale?.placeholder : null }}</span
+            >
           }
         </div>
         @if (nzShowArrow) {
@@ -340,6 +344,8 @@ export class NzCascaderComponent
   locale!: NzCascaderI18nInterface;
   dir: Direction = 'ltr';
 
+  isComposing = false;
+
   private inputString = '';
   private isOpening = false;
   private delayMenuTimer?: ReturnType<typeof setTimeout>;
@@ -596,6 +602,14 @@ export class NzCascaderComponent
     this.focus();
   }
 
+  handleInputCompositionstart(): void {
+    this.isComposing = true;
+  }
+
+  handleInputCompositionend(): void {
+    this.isComposing = false;
+  }
+
   @HostListener('click')
   onTriggerClick(): void {
     if (this.nzDisabled) {

components/cascader/cascader.spec.ts

@@ -146,6 +146,22 @@ describe('cascader', () => {
       expect(getPlaceholder()).toBe(placeholder);
     });
 
+    it('should show/hide placeholder when trigger compositionstart/compositionend event', () => {
+      testComponent.nzPlaceHolder = 'placeholder test';
+      fixture.detectChanges();
+
+      const placeholderElement = cascader.nativeElement.querySelector('.ant-select-selection-placeholder');
+      const fakeCompositionstartEvent = createFakeEvent('compositionstart', true, true);
+      getInputEl().dispatchEvent(fakeCompositionstartEvent);
+      fixture.detectChanges();
+      expect(placeholderElement.style.visibility).toBe('hidden');
+
+      const fakeCompositionendEvent = createFakeEvent('compositionend', true, true);
+      getInputEl().dispatchEvent(fakeCompositionendEvent);
+      fixture.detectChanges();
+      expect(placeholderElement.style.visibility).toBe('visible');
+    });
+
     it('should size work', () => {
       testComponent.nzSize = 'small';
       fixture.detectChanges();