fix(core): Textfield with initial value has change detection proble…

…ms with `filler` (#9375)

projects/core/components/textfield/select.directive.ts

@@ -1,6 +1,5 @@
 import {CommonModule} from '@angular/common';
 import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core';
-import {NgControl} from '@angular/forms';
 import {WA_NAVIGATOR} from '@ng-web-apis/common';
 import {TuiNativeValidator} from '@taiga-ui/cdk/directives/native-validator';
 import {tuiProvide} from '@taiga-ui/cdk/utils/miscellaneous';
@@ -34,13 +33,12 @@ import {TuiTextfieldBase, TuiTextfieldDirective} from './textfield.directive';
 })
 export class TuiSelect<T> extends TuiTextfieldBase<T> {
     private readonly nav = inject(WA_NAVIGATOR);
-    private readonly control = inject(NgControl);
 
     @Input()
     public placeholder = '';
 
     public override setValue(value: T): void {
-        this.control.control?.setValue(value);
+        this.control?.control?.setValue(value);
         this.el.dispatchEvent(new Event('input', {bubbles: true}));
     }
 
@@ -51,7 +49,7 @@ export class TuiSelect<T> extends TuiTextfieldBase<T> {
     }
 
     protected get value(): string {
-        return this.textfield.stringify(this.control.value ?? '');
+        return this.textfield.stringify(this.control?.value ?? '');
     }
 
     protected async onCopy(): Promise<void> {

projects/core/components/textfield/textfield.directive.ts

@@ -1,7 +1,9 @@
 import type {OnChanges} from '@angular/core';
 import {computed, Directive, inject, Input, signal} from '@angular/core';
 import {toSignal} from '@angular/core/rxjs-interop';
+import {NgControl} from '@angular/forms';
 import {TuiNativeValidator} from '@taiga-ui/cdk/directives/native-validator';
+import {tuiControlValue} from '@taiga-ui/cdk/observables';
 import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';
 import {
     TuiAppearance,
@@ -11,7 +13,7 @@ import {
     tuiAppearanceState,
 } from '@taiga-ui/core/directives/appearance';
 import type {TuiInteractiveState} from '@taiga-ui/core/types';
-import {fromEvent} from 'rxjs';
+import {fromEvent, map, merge, switchMap, timer} from 'rxjs';
 
 import {TuiTextfieldComponent} from './textfield.component';
 import {TUI_TEXTFIELD_OPTIONS} from './textfield.options';
@@ -21,6 +23,7 @@ export class TuiTextfieldBase<T> implements OnChanges {
     // TODO: refactor to signal inputs after Angular update
     private readonly focused = signal<boolean | null>(null);
 
+    protected readonly control = inject(NgControl, {optional: true});
     protected readonly a = tuiAppearance(inject(TUI_TEXTFIELD_OPTIONS).appearance);
     protected readonly s = tuiAppearanceState(null);
     protected readonly m = tuiAppearanceMode(this.mode);
@@ -39,7 +42,11 @@ export class TuiTextfieldBase<T> implements OnChanges {
     public invalid: boolean | null = null;
 
     public nativeValue = toSignal(
-        fromEvent(this.el, 'input', () => this.el.value),
+        merge(
+            fromEvent(this.el, 'input'),
+            timer(0) // https://github.com/angular/angular/issues/54418
+                .pipe(switchMap(() => tuiControlValue(this.control))),
+        ).pipe(map(() => this.el.value)),
         {initialValue: this.el.value},
     );
 

projects/demo-cypress/src/tests/textfield.cy.ts

@@ -0,0 +1,73 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {TUI_ANIMATIONS_SPEED, TuiRoot, TuiTextfield} from '@taiga-ui/core';
+
+@Component({
+    standalone: true,
+    imports: [FormsModule, TuiRoot, TuiTextfield],
+    template: `
+        <tui-root>
+            <tui-textfield [filler]="filler">
+                <input
+                    tuiTextfield
+                    [(ngModel)]="initialValue"
+                />
+            </tui-textfield>
+        </tui-root>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [{provide: TUI_ANIMATIONS_SPEED, useValue: 0}],
+})
+export class TestTextfield {
+    @Input()
+    public initialValue = '';
+
+    @Input()
+    public filler = '';
+}
+
+describe('Textfield', () => {
+    describe('[filler] property', () => {
+        beforeEach(() => cy.viewport(200, 150));
+
+        describe('with initial value', () => {
+            ['2', '23', '23:', '23:5', '23:59'].forEach((initialValue) => {
+                it(initialValue, () => {
+                    cy.mount(TestTextfield, {
+                        componentProperties: {
+                            initialValue,
+                            filler: 'HH:MM',
+                        },
+                    });
+
+                    cy.get('input[tuiTextfield]').focus();
+                    cy.get('tui-textfield').compareSnapshot(
+                        `[filler]-initial-value_${initialValue}`,
+                    );
+                });
+            });
+        });
+
+        describe('user types new value', () => {
+            beforeEach(() => {
+                cy.mount(TestTextfield, {
+                    componentProperties: {
+                        filler: 'HH:MM',
+                    },
+                });
+
+                cy.get('input[tuiTextfield]').focus();
+            });
+
+            ['2', '23', '23:', '23:5', '23:59'].forEach((value) => {
+                it(value, () => {
+                    cy.get('input[tuiTextfield]').type(value);
+
+                    cy.get('tui-textfield').compareSnapshot(
+                        `[filler]-user-types_${value}`,
+                    );
+                });
+            });
+        });
+    });
+});