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..5747aa03029f
--- /dev/null
+++ b/projects/demo/src/modules/components/input-inline/examples/4/index.html
@@ -0,0 +1,56 @@
+
+
+
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..ce5664c2d04d
--- /dev/null
+++ 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
new file mode 100644
index 000000000000..cad562178d9b
--- /dev/null
+++ 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
index 7ddaac8befa7..91a6ce7a649f 100644
--- 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
index 7704418f3676..af17f12cf669 100644
--- 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
index cf90a6ab6563..992299d498e0 100644
--- 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
index 754b69173b19..7f8ad4bbd8b6 100644
--- a/projects/kit/components/input-inline/input-inline.template.html
+++ b/projects/kit/components/input-inline/input-inline.template.html
@@ -1,7 +1,6 @@