🐞 - When input is narrow and value doesn't fit into input, setSelectionRange don't scroll to cursor when typing

[aktanoff]

Which package(s) are the source of the bug?

@maskito/core

Playground Link

https://codesandbox.io/p/sandbox/quiet-wildflower-6ffc5y?file=%2Fsrc%2FApp.tsx%3A58%2C23

Description

1. Open https://codesandbox.io/p/sandbox/quiet-wildflower-6ffc5y?file=%2Fsrc%2FApp.tsx%3A58%2C23
2. Type 123456789 into Maskito input
3. Last symbols should be visible (456.789 in this example), but setSelectionRange doesn't scroll to cursor position (in firefox something another causes this behavior)

Maskito version

1.9.0

Which browsers have you used?

• Chrome
• Firefox
• Safari
• Edge

Which operating systems have you used?

• macOS
• Windows
• Linux
• iOS
• Android

[aktanoff]

Checked in [email protected], bug is not reproducible there

[nsbarsukov]

Thank for your for research ❤️
It is rather complex issue and it requires in-depth research.

At the first glance, we can use element.scrollTo(element.scrollWidth, 0).

element.addEventListener('input', () => {
  /**
   * No need to execute it everytime on EVERY input event.
   * We need to find a smart way to calculate if cursor is inside overflown area.
   * And do something like this:
   * ```
   * if (isCursorHidden & notSafari & notSomethingElse) {
   *     element.scrollTo(fixedInput.scrollWidth, 0);
   * }
   * ```
   */
  element.scrollTo(fixedInput.scrollWidth, 0);
});

Learn more: https://stackblitz.com/edit/maskito-bug-scroll-in-small-textfield

---

This solution could become rather controversial and even cause some issues.
That is why I think we should initially put this experimental feature inside optional plugin maskitoScrollPlugin.
If it performs well without any problems, we will enable it by default.

[aktanoff]

@nsbarsukov, thanks for possible solution, but it looks like we need to calculate width of text that is before cursor, with applied font and font-size to calculate that cursor is hidden, and to understand where should we scroll.

cause here the examples when we also can type symbols in hidden area. | symbol means cursor position

1. |1234(start of visible area)567(end of visible area)890
2. (start of visible area)123(end of visible area)456|7890

we can achieve that by using something like this
https://codepen.io/aktanoff/pen/mdoXeGj

i didn't found any ways to solve problem without rendering the actual substring somewhere outside of input, but with the same styles

[waterplea]

Haven't looked into it yet, but it looks like the same issue:
https://stackoverflow.com/questions/71625720/scroll-to-the-caret-position-of-an-html-input

[aktanoff]

Haven't looked into it yet, but it looks like the same issue: https://stackoverflow.com/questions/71625720/scroll-to-the-caret-position-of-an-html-input

yeah, solution from link is actually what i did in codesandbox example,
but it requires firing focus on input on every change

i found another method, that mentioned in the stackoverflow page you mentioned, which we can use without having special container for calculating width of value before cursor. But it looks a bit complicated
https://stackoverflow.com/questions/6930578/get-cursor-or-text-position-in-pixels-for-input-element/7948715#7948715