Skip to content

Commit d28876c

Browse files
authored
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
1 parent 85f23a1 commit d28876c

File tree

1 file changed

+10
-6
lines changed

1 file changed

+10
-6
lines changed

components/select/select-search.component.ts

+10-6
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ import {
2020
} from '@angular/core';
2121
import { COMPOSITION_BUFFER_MODE, FormsModule } from '@angular/forms';
2222

23+
import { reqAnimFrame } from 'ng-zorro-antd/core/polyfill';
24+
2325
@Component({
2426
selector: 'nz-select-search',
2527
encapsulation: ViewEncapsulation.None,
@@ -79,12 +81,14 @@ export class NzSelectSearchComponent implements AfterViewInit, OnChanges {
7981
}
8082

8183
syncMirrorWidth(): void {
82-
const mirrorDOM = this.mirrorElement!.nativeElement;
83-
const hostDOM = this.elementRef.nativeElement;
84-
const inputDOM = this.inputElement.nativeElement;
85-
this.renderer.removeStyle(hostDOM, 'width');
86-
this.renderer.setProperty(mirrorDOM, 'textContent', `${inputDOM.value}\u00a0`);
87-
this.renderer.setStyle(hostDOM, 'width', `${mirrorDOM.scrollWidth}px`);
84+
reqAnimFrame(() => {
85+
const mirrorDOM = this.mirrorElement!.nativeElement;
86+
const hostDOM = this.elementRef.nativeElement;
87+
const inputDOM = this.inputElement.nativeElement;
88+
this.renderer.removeStyle(hostDOM, 'width');
89+
this.renderer.setProperty(mirrorDOM, 'textContent', `${inputDOM.value}\u00a0`);
90+
this.renderer.setStyle(hostDOM, 'width', `${mirrorDOM.scrollWidth}px`);
91+
});
8892
}
8993

9094
focus(): void {

0 commit comments

Comments
 (0)