fix(kit): InputInline has broken scroll in Safari & Firefox (#9818)

taiga-family · Dec 6, 2024 · 76634f1 · 76634f1
1 parent b3db7bc
commit 76634f1
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 22 deletions.
diff --git a/projects/demo/src/modules/components/input-inline/examples/4/index.html b/projects/demo/src/modules/components/input-inline/examples/4/index.html
@@ -0,0 +1,56 @@
+<ul class="task">
+    <ol>
+        I
+        <tui-input-inline>
+            <input ngModel="am" />
+        </tui-input-inline>
+        funny.
+    </ol>
+
+    <ol>
+        He
+        <tui-input-inline [class._empty]="!answer">
+            <!-- Any text inside tui-input-inline is placeholder-->
+            <!-- It will be shown fully even for unset width of InputInline -->
+            ___
+            <input [(ngModel)]="answer" />
+        </tui-input-inline>
+        funny.
+    </ol>
+
+    <ol>
+        You
+        <tui-input-inline [style.max-width.ch]="15">
+            <input
+                ngModel=""
+                placeholder="___"
+                spellcheck="false"
+            />
+        </tui-input-inline>
+        funny.
+    </ol>
+</ul>
+
+<section class="task">
+    <p>
+        <strong>Writing practice</strong>
+        <br />
+        Learning to
+        <s>write</s>
+        type underscore and hyphen
+    </p>
+    <!-- prettier-ignore -->
+    <div>
+        ___<tui-input-inline>
+        <input
+            ngModel=""
+            placeholder="___"
+        />
+    </tui-input-inline>------<tui-input-inline>
+        <input
+            ngModel=""
+            placeholder="------"
+        />
+    </tui-input-inline>
+    </div>
+</section>
diff --git a/projects/demo/src/modules/components/input-inline/examples/4/index.less b/projects/demo/src/modules/components/input-inline/examples/4/index.less
@@ -0,0 +1,13 @@
+.task:first-child input:not(:placeholder-shown) {
+    text-decoration: underline;
+    text-align: center;
+}
+
+tui-input-inline._empty,
+tui-input-inline:has(input:placeholder-shown) {
+    color: var(--tui-text-tertiary);
+}
+
+tui-input-inline:has(input[placeholder]) {
+    min-inline-size: 3ch;
+}
diff --git a/projects/demo/src/modules/components/input-inline/examples/4/index.ts b/projects/demo/src/modules/components/input-inline/examples/4/index.ts
@@ -0,0 +1,17 @@
+import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiInputInline} from '@taiga-ui/kit';
+
+@Component({
+    standalone: true,
+    imports: [FormsModule, TuiInputInline],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export default class Example {
+    protected answer = '';
+}
diff --git a/projects/demo/src/modules/components/input-inline/index.ts b/projects/demo/src/modules/components/input-inline/index.ts
@@ -9,5 +9,5 @@ import {TuiDemo} from '@demo/utils';
     changeDetection,
 })
 export default class Page {
-    protected readonly examples = ['Basic', 'Heading', 'External update'];
+    protected readonly examples = ['Basic', 'Heading', 'External update', 'Inside text'];
 }
diff --git a/projects/kit/components/input-inline/input-inline.component.ts b/projects/kit/components/input-inline/input-inline.component.ts
@@ -8,7 +8,6 @@ import {
 import {NgControl} from '@angular/forms';
 import {TuiLet} from '@taiga-ui/cdk/directives/let';
 import {tuiControlValue} from '@taiga-ui/cdk/observables';
-import {tuiIsElement, tuiIsInput} from '@taiga-ui/cdk/utils/dom';
 import {defer} from 'rxjs';
 
 @Component({
@@ -19,21 +18,10 @@ import {defer} from 'rxjs';
     styleUrls: ['./input-inline.style.less'],
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    host: {
-        '(scroll.capture)': 'onScroll($event.target)',
-    },
 })
 export class TuiInputInline {
     @ContentChild(NgControl)
     private readonly control?: NgControl;
 
     protected readonly value$ = defer(() => tuiControlValue(this.control!));
-
-    protected indent = -1;
-
-    protected onScroll(target: EventTarget | null): void {
-        if (tuiIsElement(target) && tuiIsInput(target)) {
-            this.indent = -target.scrollLeft - 1; // -1 for Safari (see styles)
-        }
-    }
 }
diff --git a/projects/kit/components/input-inline/input-inline.style.less b/projects/kit/components/input-inline/input-inline.style.less
@@ -1,26 +1,24 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
+@safari-safe-space: 1px;
+
 tui-input-inline {
     position: relative;
     display: inline-block;
-    overflow: hidden;
     white-space: nowrap;
     box-sizing: border-box;
 
-    ::spelling-error {
-        color: transparent;
-    }
-
     > .t-before {
-        display: block;
         padding-right: 0.02em; // to prevent caret shaking
-        margin-left: 1px; // to prevent hiding characters in safari
+        margin-left: @safari-safe-space; // to prevent hiding characters in safari
         white-space: pre;
+        visibility: hidden;
     }
 
     > .t-placeholder {
         display: inline-block;
         min-inline-size: 1px;
+        margin-left: -@safari-safe-space;
     }
 
     > input {
@@ -30,7 +28,7 @@ tui-input-inline {
         background-color: transparent;
         padding: inherit;
         font: inherit;
-        -webkit-text-fill-color: transparent;
+        color: inherit;
         box-sizing: border-box;
         inline-size: 100%;
         block-size: 100%;

diff --git a/projects/kit/components/input-inline/input-inline.template.html b/projects/kit/components/input-inline/input-inline.template.html
@@ -1,7 +1,6 @@
 <ng-container *tuiLet="value$ | async as value">
     <span
         class="t-before"
-        [style.text-indent.px]="indent"
         [textContent]="value"
     ></span>