Skip to content

Commit

Permalink
fix(module: select): multiple select cause switch size flash when init (
Browse files Browse the repository at this point in the history
#8851)

fix the issue that the size of nz-switch blinks when used together with a nz-select in multiple mode
  • Loading branch information
WwwHhhYran authored Nov 7, 2024
1 parent 85f23a1 commit d28876c
Showing 1 changed file with 10 additions and 6 deletions.
16 changes: 10 additions & 6 deletions components/select/select-search.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 {
Expand Down

0 comments on commit d28876c

Please sign in to comment.