Radio button works incorrectly when patch from value

[vytautas-pranskunas-]

I am attaching a vuideo but it is some kind of tick missing because when i path from value (after 2 seconds as you can see in source code) radio button value changes but animation is not played until the end. It is enough for me click anywhere on the screen and animation is completed. Any ideas why it could happen?

Screen.Recording.2024-11-20.at.11.35.44.mov

[vytautas-pranskunas-]

I have done few thing during my investigation. I had extracted code with form to seperate component and added this component over existing radio buttons. It looks and works different. First off all ther is no data-appearance="primary" on radiobuttons inside of extracted component but there on screen radio buttons. Second thing that in extracted component there is white big circle of ::before. Any ideas why? But animation is capable to play fully

code of extracted component:
`
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
import { TitlePrintOption } from '@api';
import { TranslateModule } from '@ngx-translate/core';
import { TuiTextfield } from '@taiga-ui/core';
import { TuiRadio } from '@taiga-ui/kit';

@component({
selector: 'pa-test-component',
standalone: true,
templateUrl: './test-component.component.html',
imports: [CommonModule, TranslateModule, ReactiveFormsModule, TuiTextfield, TuiRadio],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TestComponent implements OnInit {
private readonly formBuilder = inject(FormBuilder);

form = this.formBuilder.group({
    printDepartmentOption: [TitlePrintOption.DoNotPrint],
});

ngOnInit(): void {
    setTimeout(() => {
        this.form.patchValue({ printDepartmentOption: TitlePrintOption.Print });
    }, 2000);
}

}

`

`

{{ 'appeal-edit.doNotPrintDepartmentName' | translate }}

{{ 'appeal-edit.printDepartmentName' | translate }}

{{ 'appeal-edit.printDepartmentNameCustom' | translate }}

  <!-- Column 2 -->
  <div class="column"></div>

`

Screen.Recording.2024-11-20.at.11.59.13.mov

[waterplea]

You have OnPush. Either add this.cdr.markForCheck(); or remove OnPush. It is expected not to pick up on changes when you use setTimeout with OnPush change detection strategy, that's on Angular, not on Taiga UI.

[vytautas-pranskunas-]

i stongly do not agree, because it is not setatimout. SetTimeout only mimics api call. Pls show me in docs where it is written that form.patch should be used with detectChanges after api data fetch when using onPush. Plus it is clearly visible that it changes checked radio just animation is not player well, plus if you try it with normal radio or any other component it will work

[vytautas-pranskunas-]

P.s. in real ptoject i use state managment system which does markForCheck while syncing with form state but problem persists.

[waterplea]

In your stackblitz when I add markForCheck it fixes the issue. As it is it is working as expected, without notifying Angular change detection while doing async operations in OnPush all sorts of different issues might pop up — this is not the correct usage.

It works part-way because Angular imperatively updates state of the checkbox without notifying change detection, so styles that depend on CSS :checked are applied, but some other things rely on bindings that are not updated because nothing has notified the view that change detection must be ran.

In other words, either use default change detection strategy, or use OnPush properly. If your state management calls markForCheck it must be calling it at a wrong time or at a wrong view. If you can reproduce this issue while notifying Angular change detection — please post a stackblitz reproduction.