Does OverlayScrollbars React moves caret in inputs?

[krutoo]

Hello. In my app i noticed that focus on fields works differently in modal (with OverlayScrollbars) and outside a modal

After focus on input in modal cursor moves at end but in chrome focus on password field moves cursor at end

Does OverlayScrollbars moves caret in inputs?

[KingSora]

Good day @krutoo

OverlayScrollbars has no code related to moving the caret position inside an input.. OverlayScrollbars only has a tiny bit of "focus management" code so that keyboard accessibility is not lost during initialization or scrolling by clicking / interacting with the scrollbars.

[krutoo]

@KingSora Here is an example of difference between input work inside OverlayScrollbarsComponent and outside it:
https://github.com/krutoo/overlayscrollbars-password-chrome

Can you suggest why there is the difference?

Exactly in Google Chrome

[KingSora]

@krutoo This seems to be a "bug" or side effect of chrome.. I couldn't observe any difference in the two inputs inside of Firefox.

Here is what I found out:

OverlayScrollbars measures the viewport container after a mutation. Exactly this measurement causes the caret position to not reset for some reason.

You can simulate this by adding some kind of measuring code at the end of your click listener:

button.addEventListener("click", () => {
  // focus only if input is not focused
  if (document.activeElement !== input) {
    input.focus();
  }

  // change input type
  input.type = input.type === "text" ? "password" : "text";
  button.textContent = input.type === "text" ? "Hide" : "Show";

  // measure something...
  container.getBoundingClientRect();
});

Adding the last line should make both versions behave the same

[KingSora]

@krutoo could you confirm the behavior?

[krutoo]

@KingSora Yes in Chrome calling getBoundingClientRect fixes the behavior

I put all info here: https://issues.chromium.org/issues/371791301