🐞 - InputInline has broken scroll in Safari / Firefox

[goodday21]

Playground Link

No response

Description

Браузер - Safari.

Компонент - https://taiga-ui.dev/components/input-inline#heading

Шаги:

1. нажать на иконку редактирования у элемента "Page heading"
2. ввести длинную строку, более 150 символов
3. сохранить изменения
4. снова нажать на иконку редактирования
5. попробовать поменять строку

Ожидаемый результат: фокус установлен в конец строки, пользователь может передвигать курсор по тексту и редактировать его
Фактический результат: фокус остается на начале строки. Если пользователь работает с концом строки, то он не видит, что вводит

Angular version

No response

Taiga UI version

3.80.0

Which browsers have you used?

• Chrome
• Firefox
• Safari
• Edge

Which operating systems have you used?

• macOS
• Windows
• Linux
• iOS
• Android

[waterplea]

Safari does not dispatch scroll events for inputs. We need to use additional keypress events, selection change events and whatnot to be able to adjust text-indent to input scroll. Maybe it's even easier to just use silent animation frame for polling, but that might cause a lot of CSS reflow.

[nsbarsukov]

Just some intermediate investigations

We can replace the following logic

taiga-ui/projects/kit/components/input-inline/input-inline.component.ts

Lines 32 to 38 in 432a486

	protected indent = -1;
	protected onScroll(target: EventTarget | null): void {
	if (tuiIsElement(target) && tuiIsInput(target)) {
	this.indent = -target.scrollLeft - 1; // -1 for Safari (see styles)
	}
	}

with

protected indent$ = merge(
    fromEvent(this.element, 'scroll', {capture: true}), // Only Chrome emits this event for <input />
    // Chrome does not fire `selectionchange` on deletion (but do it on insertion) ¯\_(ツ)_/¯
    fromEvent(this.element, 'selectionchange', {capture: true}), // Firefox + Safari fallback
    // Chrome & Safari scrolls input to the beginning on blur
    // Firefox – keeps the same scrollLeft position on blur
    fromEvent(this.element, 'focusout').pipe(
        concatMap(
            (x) => of(x).pipe(delay(0)), // Without delay `scrollLeft` is not yet updated
        ),
    ),
).pipe(
    map(({target}) => target),
    filter((x): x is HTMLInputElement => tuiIsElement(x) && tuiIsInput(x)),
    map(
        ({scrollLeft}) => -scrollLeft - 1, // -1 for Safari (see styles)
    ),
);

However, it still does fully solves all issue for Safari / Firefox.
Try to insert many characters and the use many Backspaces then.
The content will slightly shift to the left: textContent of ghost-span updates faster than textIndent calculations (shrinking of ghost-span should be AFTER textIndent calculations).

taiga-ui/projects/kit/components/input-inline/input-inline.template.html

Lines 2 to 6 in 432a486

	<span
	class="t-before"
	[style.text-indent.px]="indent"
	[textContent]="value"
	></span>

Even if we delay update of textContent (by adding delay(0) to indent$ stream) - insertion of new character will be broken (we should increase size of ghost-span BEFORE textIndent calculations).

[nsbarsukov]

TODO

Discuss this PR with @waterplea

• fix(kit): InputInline fix alignment with other elements #4505

Which problem was solved by this PR ?
Could we make <input />-element visible again (and solve that problem in another way) ?
If it was about vertical alignment with another inline-elements – probably we could just remove overflow:hidden from the host (to not break baseline of host inline block).

taiga-ui/projects/kit/components/input-inline/input-inline.style.less

Lines 5 to 6 in 432a486

	display: inline-block;
	overflow: hidden;