Anyone else experience a small input delay when entering into a Text input component?

On Cloud + Windows, Chrome & Edge, both Text Input and Text Area components in a container within a modal, when typing quickly the text is displayed after a few hundred ms of delay. You don't notice this when typing one letter, but if you type a sentence.

Here is a gif of me typing into a Text Area component with a keyboard input logger below, notice the delay.
textcomponentinput

3 Likes

Yeah I have the same issue, it seems to be related to some JS stuff triggered on keydown and keyup, and the faster you type the worse it seems to get.
I thought it might had something to do with a custom shortcut I programmed, but I removed that one and the issue stayed the same, as well very similar issues on the timing in Edge and Chrome.
Hope this gets looked soon, because I don't recall that from earlier experiments with retool

I'm having this issue. Very new to Retool and it's one of my very few concerns with our app (which requires a lot of text). I also notice if I try to insert text within a sentence my cursor will jump to the end of the input suddenly as I type.

The problem has gotten worse as the app has grown and I'm trying to better optimize for performance, but would love to know other things I might be doing wrong.

Can someone from Retool comment?

1 Like

Coming over here from: ListView / Modify Values and save - #9 by whynot

So, it seems that the input lag is a general issue. Hopefully solution soon.

1 Like

does this happen with no events attached to the textinput?

if you do have an Event Handler that triggers onChange, you'll want to use the Debounce option at the bottom of the event handler window:
image

I have had "Blur" event enabled, but also without no event handler it is still the same.
I discovered in google chrome developer tools on console view the following notifications, when hovering over the text input areas:

"If you do not provide a visible lavel, you must specify an aria-label or aria-labelledby attribute for accessibility"

I added a label via the component options but still the log is the same.
Might it have to do something with it ?

I was experiencing this 'text jitter' site-wide (for all my text inputs on all retool apps) and found that the input components were deprecated and needed upgrades. An annoying process, but going to each one and clicking 'upgrade' fixed the issue.

Thanks so much for chiming in @Stephen_Beck!

If anyone is using an older component & has the option to upgrade from the right panel inspector, please go ahead and upgrade to see if that fixes any issues :crossed_fingers:

As mentioned above, if you have an event that triggers "on change," this will likely cause a bit of lagging. We'd recommend changing the event type if possible, or adding a delay to the event trigger.

Given all of these reports, it seems like there may also be another bug here, but I haven't been able to reproduce it yet for our team which can make it more challenging to pin down. If anyone is able to share an export of their app by going to the debug console->and then clicking download, that would be super helpful! You can post the download in this thread or send to me as a direct message.

The issue I was having - where the cursor would hop to the end of the input - appears to be caused by the custom App Theme we were using. I had some apps that were doing it and others that weren't and once it was reset the behavior seems to stop.

Screen Recording 2024-01-31 at 8.17.11 PM