fix(kit): InputInline fix width calculation (#4878)

Co-authored-by: a.inkin <a.inkin@tinkoff.ru>
taiga-family · Jul 10, 2023 · 7518bf8 · 7518bf8
1 parent fcaac27
commit 7518bf8
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/projects/kit/components/input-inline/input-inline.component.ts b/projects/kit/components/input-inline/input-inline.component.ts
@@ -36,6 +36,9 @@ export class TuiInputInlineComponent
     @ViewChild('native')
     private readonly native?: ElementRef<HTMLInputElement>;
 
+    @ViewChild('text')
+    private readonly text?: ElementRef<HTMLElement>;
+
     @Input()
     maxLength: number | null = null;
 
@@ -63,8 +66,14 @@ export class TuiInputInlineComponent
         return this.value !== '';
     }
 
-    /** @deprecated use 'value' setter */
     onValueChange(value: string): void {
+        if (!this.text) {
+            return;
+        }
+
+        // Sync update so width is calculated immediately
+        this.text.nativeElement.textContent = value;
+        this.text.nativeElement.style.textIndent = '';
         this.value = value;
     }
 

diff --git a/projects/kit/components/input-inline/input-inline.template.html b/projects/kit/components/input-inline/input-inline.template.html
@@ -1,4 +1,5 @@
 <span
+    #text
     class="t-before"
     [style.text-indent.px]="indent"
     [textContent]="value"
@@ -23,7 +24,8 @@
     [disabled]="computedDisabled"
     [readOnly]="readOnly"
     [tuiFocusable]="focusable"
-    [(ngModel)]="value"
+    [ngModel]="value"
+    (ngModelChange)="onValueChange($event)"
     (scroll)="onScroll()"
     (tuiFocusedChange)="onFocused($event)"
 />