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
new file mode 100644
index 000000000000..becb4097722e
--- /dev/null
+++ b/projects/demo/src/modules/components/input-inline/examples/4/index.html
@@ -0,0 +1,47 @@
+
+
+ I
+
+ funny.
+
+
+
+ He
+
+ ___
+
+ funny.
+
+
+
+ You
+
+ ___
+
+ funny.
+
+
+
+
+
+ Writing practice
+
+ Learning to
+ write
+ type underscore and hyphen
+
+
+
+ ___
+ ___
+
+ ------
+ ------
+
+
+
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
new file mode 100644
index 000000000000..ea81110bc85c
--- /dev/null
+++ 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
new file mode 100644
index 000000000000..35cddc856b53
--- /dev/null
+++ 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
index bd3327f9fc31..e53f76d4f6b2 100644
--- 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
index 1b52a4e1a81b..1ca16cfd8019 100644
--- 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
index c283cf30b909..43a0d7ee104e 100644
--- 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 @@
>
+
+
+
+
diff --git a/projects/kit/components/input-inline/input-inline.component.ts b/projects/kit/components/input-inline/input-inline.component.ts
index cb77d95f46f4..010d2862c71b 100644
--- 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;
- @ViewChild('text')
- private readonly text?: ElementRef;
-
@Input()
maxLength: number | null = null;
- indent = -1;
-
constructor(
@Optional()
@Self()
@@ -62,18 +57,7 @@ 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;
}
@@ -81,13 +65,6 @@ export class TuiInputInlineComponent
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
index f333e45b1909..f8c238f42971 100644
--- 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
index fbef1700f850..3684373c548f 100644
--- a/projects/kit/components/input-inline/input-inline.template.html
+++ b/projects/kit/components/input-inline/input-inline.template.html
@@ -1,12 +1,10 @@
@@ -26,6 +24,5 @@
[readOnly]="readOnly"
[tuiFocusable]="focusable"
(ngModelChange)="onValueChange($event)"
- (scroll)="onScroll()"
(tuiFocusedChange)="onFocused($event)"
/>