fix(core): Textfield has change detection problems for [filler]

projects/core/components/textfield/textfield.component.ts

@@ -8,6 +8,7 @@ import {
     forwardRef,
     inject,
     Input,
+    signal,
     ViewChild,
     ViewContainerRef,
     ViewEncapsulation,
@@ -65,6 +66,8 @@ import {TuiWithTextfieldDropdown} from './textfield-dropdown.directive';
     },
 })
 export class TuiTextfieldComponent<T> implements TuiDataListHost<T> {
+    // TODO: refactor to signal inputs after Angular update
+    private readonly filler = signal('');
     private readonly autoId = tuiInjectId();
     private readonly el = tuiInjectElement();
     private readonly open = tuiDropdownOpen();
@@ -81,6 +84,21 @@ export class TuiTextfieldComponent<T> implements TuiDataListHost<T> {
 
     protected readonly icons = inject(TUI_COMMON_ICONS);
 
+    protected computedFiller = computed(() => {
+        const value = this.directive?.nativeValue() || '';
+        const filledValue = value + this.filler().slice(value.length);
+
+        return filledValue.length > value.length ? filledValue : '';
+    });
+
+    protected showFiller = computed(() =>
+        Boolean(
+            this.focused() &&
+                this.computedFiller() &&
+                (this.directive?.nativeValue() || !this.input?.nativeElement.placeholder),
+        ),
+    );
+
     @ViewChild('vcr', {read: ViewContainerRef, static: true})
     public readonly vcr?: ViewContainerRef;
 
@@ -90,9 +108,6 @@ export class TuiTextfieldComponent<T> implements TuiDataListHost<T> {
     })
     public readonly input?: ElementRef<HTMLInputElement>;
 
-    @Input()
-    public filler = '';
-
     @Input()
     public stringify: TuiStringHandler<T> = String;
 
@@ -102,6 +117,11 @@ export class TuiTextfieldComponent<T> implements TuiDataListHost<T> {
     public readonly focused = computed(() => this.open() || this.focusedIn());
     public readonly options = inject(TUI_TEXTFIELD_OPTIONS);
 
+    @Input('filler')
+    public set fillerSetter(filler: string) {
+        this.filler.set(filler);
+    }
+
     public get id(): string {
         return this.input?.nativeElement.id || this.autoId;
     }
@@ -115,21 +135,6 @@ export class TuiTextfieldComponent<T> implements TuiDataListHost<T> {
         this.open.set(false);
     }
 
-    protected get computedFiller(): string {
-        const value = this.input?.nativeElement.value || '';
-        const filler = value + this.filler.slice(value.length);
-
-        return filler.length > value.length ? filler : '';
-    }
-
-    protected get showFiller(): boolean {
-        return (
-            this.focused() &&
-            !!this.computedFiller &&
-            (!!this.input?.nativeElement.value || !this.input?.nativeElement.placeholder)
-        );
-    }
-
     protected get hasLabel(): boolean {
         return Boolean(this.label?.nativeElement?.childNodes.length);
     }

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

@@ -1,4 +1,5 @@
 import {computed, Directive, inject, Input, type OnChanges, signal} from '@angular/core';
+import {toSignal} from '@angular/core/rxjs-interop';
 import {TuiNativeValidator} from '@taiga-ui/cdk/directives/native-validator';
 import {tuiInjectElement} from '@taiga-ui/cdk/utils/dom';
 import {
@@ -9,6 +10,7 @@ import {
     tuiAppearanceState,
 } from '@taiga-ui/core/directives/appearance';
 import type {TuiInteractiveState} from '@taiga-ui/core/types';
+import {fromEvent} from 'rxjs';
 
 import {TuiTextfieldComponent} from './textfield.component';
 import {TUI_TEXTFIELD_OPTIONS} from './textfield.options';
@@ -35,6 +37,11 @@ export class TuiTextfieldBase<T> implements OnChanges {
     @Input()
     public invalid: boolean | null = null;
 
+    public nativeValue = toSignal(
+        fromEvent(this.el, 'input', () => this.el.value),
+        {initialValue: this.el.value},
+    );
+
     @Input('focused')
     public set focusedSetter(focused: boolean | null) {
         this.focused.set(focused);

projects/core/components/textfield/textfield.template.html

@@ -28,9 +28,9 @@
     </ng-container>
 </span>
 <input
-    *ngIf="showFiller"
+    *ngIf="showFiller()"
     aria-hidden="true"
     disabled
     class="t-filler"
-    [value]="computedFiller"
+    [value]="computedFiller()"
 />