From 8f6667345cbc964f9f3ec2b6e160ce11a00aeaa0 Mon Sep 17 00:00:00 2001 From: Barsukov Nikita Date: Tue, 17 May 2022 12:37:30 +0300 Subject: [PATCH] fix(kit): `ComboBox` throws `ExpressionChangedAfterItHasBeenCheckedError` --- .../select-option/select-option.component.ts | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/projects/kit/components/select-option/select-option.component.ts b/projects/kit/components/select-option/select-option.component.ts index 9bb0aed4c270..d5ff0aa4721d 100644 --- a/projects/kit/components/select-option/select-option.component.ts +++ b/projects/kit/components/select-option/select-option.component.ts @@ -50,9 +50,18 @@ export class TuiSelectOptionComponent implements OnInit { } ngOnInit(): void { - if (isPresent(this.option.value) && this.host.checkOption) { - this.host.checkOption(this.option.value); - } + /** + * This would cause changes inside already checked parent component (during the same change detection cycle), + * and it might cause ExpressionChanged error due to potential HostBinding + * (for example, inside {@link https://github.com/angular/angular/blob/main/packages/forms/src/directives/ng_control_status.ts#L99 NgControlStatus}). + * Microtask keeps it in the same frame but allows change detection to run. + */ + // eslint-disable-next-line @typescript-eslint/no-floating-promises + Promise.resolve().then(() => { + if (isPresent(this.option.value) && this.host.checkOption) { + this.host.checkOption(this.option.value); + } + }); } protected get selected(): boolean {