From d28876cdae5bb1b4df3fda66ebdf6248e43f5a36 Mon Sep 17 00:00:00 2001
From: WwwHhhYran <62340860+WwwHhhYran@users.noreply.github.com>
Date: Thu, 7 Nov 2024 16:43:52 +0800
Subject: [PATCH] fix(module: select): multiple select cause switch size flash
 when init (#8851)

fix the issue that the size of nz-switch blinks when used together with a nz-select in multiple mode
---
 components/select/select-search.component.ts | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/components/select/select-search.component.ts b/components/select/select-search.component.ts
index 0f78f08d5a7..d8096bc5c5e 100644
--- a/components/select/select-search.component.ts
+++ b/components/select/select-search.component.ts
@@ -20,6 +20,8 @@ import {
 } from '@angular/core';
 import { COMPOSITION_BUFFER_MODE, FormsModule } from '@angular/forms';
 
+import { reqAnimFrame } from 'ng-zorro-antd/core/polyfill';
+
 @Component({
   selector: 'nz-select-search',
   encapsulation: ViewEncapsulation.None,
@@ -79,12 +81,14 @@ export class NzSelectSearchComponent implements AfterViewInit, OnChanges {
   }
 
   syncMirrorWidth(): void {
-    const mirrorDOM = this.mirrorElement!.nativeElement;
-    const hostDOM = this.elementRef.nativeElement;
-    const inputDOM = this.inputElement.nativeElement;
-    this.renderer.removeStyle(hostDOM, 'width');
-    this.renderer.setProperty(mirrorDOM, 'textContent', `${inputDOM.value}\u00a0`);
-    this.renderer.setStyle(hostDOM, 'width', `${mirrorDOM.scrollWidth}px`);
+    reqAnimFrame(() => {
+      const mirrorDOM = this.mirrorElement!.nativeElement;
+      const hostDOM = this.elementRef.nativeElement;
+      const inputDOM = this.inputElement.nativeElement;
+      this.renderer.removeStyle(hostDOM, 'width');
+      this.renderer.setProperty(mirrorDOM, 'textContent', `${inputDOM.value}\u00a0`);
+      this.renderer.setStyle(hostDOM, 'width', `${mirrorDOM.scrollWidth}px`);
+    });
   }
 
   focus(): void {