Hi @tomerer2000 ,
I ran into the same issue - it’s the ‘fetch collection’ function that causes a glitch while changing the input. Debounce masks this a little bit, but has the inherit limitation that it assumes an average typing speed for all of your users - and causes to glitch for the slow typer (or if you set the debounce too slow for that slow typer then changes may be not captured in time for the very fast typer).
In my opinion, the perfect/flawless way is to record a change in 3 steps:
- On focus: record the initial value to a temporary variable
- On change: overwrite (without debounce) the temporary variable
- On blur: make API-call / record the new value
Only downside to this approach is the setup time: your input requires 3 actions.
Another way is:
- Record input on change via API-call, but don’t fetch the collection
- Execute ‘update collection’ (instead of fetch collection)
Limitations to this second approach:
- it’s only possible with arrays (not with objects)
- if you have other collection that are affected by the change, than you need a second ‘update collection’ - so in that case the prior solution is less complicated.
A little bit more of this is described here: Best practice for saving events/input fields on change (especially rich text input field) - #6 by Himanshu