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

taiga-family · Dec 10, 2024 · ac13a6f · ac13a6f
1 parent 99af187
commit ac13a6f
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 35 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,47 @@
+<ul class="task">
+    <ol>
+        I
+        <tui-input-inline ngModel="am"></tui-input-inline>
+        funny.
+    </ol>
+
+    <ol>
+        He
+        <tui-input-inline ngModel="">
+            <span class="placeholder">___</span>
+        </tui-input-inline>
+        funny.
+    </ol>
+
+    <ol>
+        You
+        <tui-input-inline
+            ngModel=""
+            spellcheck="false"
+            [style.max-width.ch]="15"
+            [style.min-width.ch]="3"
+        >
+            <span class="placeholder">___</span>
+        </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 ngModel="">
+            <span class="placeholder">___</span>
+        </tui-input-inline>
+        ------<tui-input-inline ngModel="">
+            <span class="placeholder">------</span>
+        </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,8 @@
+.task:first-child tui-input-inline {
+    text-decoration: underline;
+    text-align: center;
+}
+
+.placeholder {
+    color: var(--tui-text-03);
+}
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,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-input-inline-example-4',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export default class TuiInputInlineExample4 {}
diff --git a/projects/demo/src/modules/components/input-inline/input-inline.component.ts b/projects/demo/src/modules/components/input-inline/input-inline.component.ts
@@ -33,6 +33,12 @@ export class ExampleTuiInputInlineComponent extends AbstractExampleTuiControl {
         LESS: import('./examples/3/style.less?raw'),
     };
 
+    readonly example4: TuiDocExample = {
+        HTML: import('./examples/4/index.html?raw'),
+        LESS: import('./examples/4/index.less?raw'),
+        TypeScript: import('./examples/4/index.ts?raw'),
+    };
+
     control = new FormControl('111', Validators.required);
 
     override readonly maxLengthVariants: readonly number[] = [10];

diff --git a/projects/demo/src/modules/components/input-inline/input-inline.module.ts b/projects/demo/src/modules/components/input-inline/input-inline.module.ts
@@ -10,6 +10,7 @@ import {TuiInputInlineModule} from '@taiga-ui/kit';
 import {TuiInputInlineExample1} from './examples/1/component';
 import {TuiInputInlineExample2} from './examples/2/component';
 import {TuiInputInlineExample3} from './examples/3/component';
+import TuiInputInlineExample4 from './examples/4';
 import {ExampleTuiInputInlineComponent} from './input-inline.component';
 
 @NgModule({
@@ -28,6 +29,7 @@ import {ExampleTuiInputInlineComponent} from './input-inline.component';
         TuiInputInlineExample1,
         TuiInputInlineExample2,
         TuiInputInlineExample3,
+        TuiInputInlineExample4,
     ],
     exports: [ExampleTuiInputInlineComponent],
 })

diff --git a/projects/demo/src/modules/components/input-inline/input-inline.template.html b/projects/demo/src/modules/components/input-inline/input-inline.template.html
@@ -29,6 +29,14 @@
         >
             <tui-input-inline-example-3></tui-input-inline-example-3>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="inside-text"
+            heading="Inside text"
+            [content]="example4"
+        >
+            <tui-input-inline-example-4></tui-input-inline-example-4>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>

diff --git a/projects/kit/components/input-inline/input-inline.component.ts b/projects/kit/components/input-inline/input-inline.component.ts
@@ -36,14 +36,9 @@ export class TuiInputInlineComponent
     @ViewChild('native')
     private readonly native?: ElementRef<HTMLInputElement>;
 
-    @ViewChild('text')
-    private readonly text?: ElementRef<HTMLElement>;
-
     @Input()
     maxLength: number | null = null;
 
-    indent = -1;
-
     constructor(
         @Optional()
         @Self()
@@ -62,32 +57,14 @@ export class TuiInputInlineComponent
         return tuiIsNativeFocused(this.nativeFocusableElement);
     }
 
-    get hasValue(): boolean {
-        return this.value !== '';
-    }
-
     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;
     }
 
     onFocused(focused: boolean): void {
         this.updateFocused(focused);
     }
 
-    onScroll(): void {
-        const indent = this.native?.nativeElement.scrollLeft || 0;
-
-        // -1 for Safari (see styles)
-        this.indent = -1 - indent;
-    }
-
     protected getFallbackValue(): string {
         return '';
     }

diff --git a/projects/kit/components/input-inline/input-inline.style.less b/projects/kit/components/input-inline/input-inline.style.less
@@ -1,27 +1,25 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
+@safari-safe-space: 1px;
+
 :host {
     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-width: 1px;
+    margin-left: -@safari-safe-space;
 }
 
 .t-native {
@@ -31,7 +29,7 @@
     background-color: transparent;
     padding: inherit;
     font: inherit;
-    -webkit-text-fill-color: transparent;
+    color: inherit;
     box-sizing: border-box;
     width: 100%;
     height: 100%;
@@ -40,5 +38,6 @@
     letter-spacing: inherit;
     text-indent: inherit;
     text-transform: inherit;
+    text-decoration: inherit;
     outline: none;
 }
diff --git a/projects/kit/components/input-inline/input-inline.template.html b/projects/kit/components/input-inline/input-inline.template.html
@@ -1,12 +1,10 @@
 <span
-    #text
     class="t-before"
-    [style.text-indent.px]="indent"
     [textContent]="value"
 ></span>
 
 <span
-    *ngIf="!hasValue"
+    *ngIf="!value"
     automation-id="tui-input-inline__placeholder"
     class="t-placeholder"
 >
@@ -26,6 +24,5 @@
     [readOnly]="readOnly"
     [tuiFocusable]="focusable"
     (ngModelChange)="onValueChange($event)"
-    (scroll)="onScroll()"
     (tuiFocusedChange)="onFocused($event)"
 />