Long input text doesn't line up with hint

[orassayag]

Version

Steps to reproduce

1. Go to https://codesandbox.io/s/nostalgic-payne-n4y9e6
2. Start type "Alabama-Alabama-Alabama"
3. Text is blurry in the end.
4. If you don't get it, just type "Alabama-Alabama-Alabama" and try to delete some characters.

Expected Behavior

Text don't blur.

Actual Behavior

Text is blurry.

[ericgio]

Hey @orassayag, thanks for filing this issue! What's happening here is that the text in the main input is overflowing and scrolls within the input, while the hint text behind it stays fixed, creating a blur effect. I'm not totally sure how to go about fixing this problem; there might be a way to sync the selection state of the inputs. I'm open to ideas or PRs to fix this problem.

[ericgio]

I tried a simple test with two inputs and I'm not sure it's possible to sync the behaviors. You can assign the selectionStart and selectionEnd values of one input to the other, but I'm not aware of a way to actually make the values scroll within the input in sync with each other. Unfortunately, the best workaround in this case is probably to just disable the hint.

[orassayag]

Thanks @ericgio. This is a bug that the QA in our office opened to me and I'm not sure what to tell him. For now I just disable the hint if the characters are bigger than X, but it's not really good. Hope you guys will find a way to solve this. Thanks.

[AlwaysBeCalm]

@ericgio can you add an option, a prop to hide the hint/placeholder?

[bryanakitchen]

@orassayag and @ericgio - I noticed the problem was that the hint input keeps the value scrolled to the leftmost position, while the main input keeps the value scrolled to the rightmost position. Here's the solution I came up with until a permanent fix is made:

        const hintInput = document.getElementsByClassName('rbt-input-hint')[0];
        const mainInput = document.getElementsByClassName('rbt-input-main')[0];
        if (
          hintInput?.value &&
          mainInput?.scrollWidth > mainInput?.offsetWidth &&
          hintInput?.scrollWidth > hintInput?.offsetWidth
        ) {
          hintInput.scrollLeft = hintInput.scrollWidth;
          hintInput.style.opacity = '0.2';
        } else if (hintInput) {
          hintInput.scrollLeft = hintInput.scrollWidth;
          hintInput.style.opacity = '0.65';
        }

Let me know if you have any questions.