I don't quite understand why this is happening and how to fix it, but when I'm typing something in the TextArea component there is a "jitter" that throws me back I have typed after N ms. And it only happens on Change event! If I set Focus event for example that is not a problem anymore.
I don't use Debounce or Throttle on edit event handler. Why is this happening?
Hi @danyloh
There is similar running thread for this type of an issue. Maybe some of the responses or similar use cases/answers might be helpful. Also you can add your issue there so the team is aware if this is a bug so they can write up a ticket for it.
Hi @danyloh, what you are experiencing is a bit different than what is on the running thread, that one is a report of this happening without event handlers attached to the input, which our engineers are currently investigating.
In our case, the onChange event handler on the text input is making an update to the state variable the component is using as a data source. After the asynchronous function setValue is done running (for each key pressed), the component re-renders because its Data source has changed. By the time it has rendered again, the user has typed more on it, which has fired the same function many more times. This endless cycle keeps running every time a key is pressed so there are too many async functions fired.
Would adding await fix this? Not really, because the user would have to press one key and wait for the function to end before being able to type another character.
The workaround that I recommend is using a second State variable that we update on change, and a button to run the stateVariable.setValue only once, when the user is done changing the value of the input.
This was driving me crazy…
I started setting up all of my text components with an event handler that updates a variable on change and a separate handler that updates the DB on blur (which only runs when event handler 1 has updated the variable)
Hasn’t been an issue since
Hi @Mike_DeKock, thank you for sharing your workaround!
Adding a debounce of 500-1000ms to the event handler should also fix the issue. This would make it so the event handler only runs when the user has finished typing, or at least stopped for half a second.
