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

[vytautas-pranskunas-]

Yes, i was able to reproduce it.. Issue with not fully selected radio button: https://stackblitz.com/edit/angular-buf4yk?file=src%2Fapp%2Fapp.template.html,src%2Fapp%2Fapp.component.ts&hideExplorer=1

however i still wonder why when it is in seperate component the look of radio is different - i was not able to reproduce that part :(

[vytautas-pranskunas-]

p.s. also can you advice why textField is not disabled at first load and becomes disabled only after subsecuent clicking of radio buttons?

[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.