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

Confirming this is still an issue. The Text Area component has no lag until it is placed inside of a populated form for me. It has no event handlers attached, and no validation on that specific field yet it slogs seconds behind keypresses. Workaround for now is "recreating" the form without using the form component.

This turned out to be the same issue for me - custom App Theme seems to be the culprit. When switching back to a predefined theme, the slow text behavior goes away. @Tess any chance there's a bug with the custom app code that could be causing this? (Note I'm on self hosted 3.33.7)

I have the issue without having the textarea inside a form, but a listview component.
It seems that the more components are placed on the canvas, the worse it gets.

Urgent support needed, please @Tess !
Thanks!

Hi everyone, good news!

The issue of input lag on text areas is solved from version 3.43 upwards after having a chat with a performance engineer at Retool. We identified the issue and they fixed it quickly, awesome support and reaction times, kudos to Retool :slight_smile:

The issue could be pinned down by having an application with about 60 or more components on the canvas. When typing in one of the text areas, the browsers Event: keypress took about 160-180ms to be rendered due to a timeout - call during typing (the yellow block).

With smaller applications, this "timeout-call" did not appear, hence was much faster to type.

1 Like

Great to hear! :tada:

We shipped an update on Friday that we believe resolves the issues folks are running into. For everyone else, definitely let us know if you're still seeing anything unexpected

Hey @Tess, we're using v3.32.13. Our team is currently having this issue and was wondering if this version is the correct version for us to use?

It looks like it shipped in 3.33!