Live debounce is causing missed keystrokes in TextInput
->live(onBlur: true) works nicely but ->live(debounce: 500) is causing some keystrokes to bbe "deleted" or missed. I am typing something and it is showing in the slug text field however after like 4 or 4 keystrokes suddenly I see how the character typed is immediately deleted from both fields and I have to type it again which is annoying because I am getting a slug and title with missing letters here and there. How to solve this problem?11 Replies
Same issue here. I think this is more a livewire issue though. My temp resolution was to increase from 500 to say 1500 and the issue seems to go. I think possibly it’s the time between keystrokes messing it up.
This is a risk of using livewire. Debounce tells it to not make a server request unless the user stops interacting with the input for that amount of time. It however is not a guarantee of response time from the server to return the request. So, if they start typing before the request completes then the dom diffing will update the state with what it has at that point in time.
Great explanation thank you. So I guess either guarantee lightening quick processing ( response time) or use on blur would be the way to go ?
Pretty much. Personally, something like realtime validation is needed I would make alpine do it on the frontend, otherwise blur would be the best option. It’s not realtime, but it’s real enough time to keep the user from filling out the entire form before knowing they did something wrong.
Agreed. I know this is wrong , but I currently have some forms which save to the db on a live with debounce. I’m thinking I need to move it to a blur though.
P.s sorry for hijacking the comments Wirkhof
Well, if you have to do something for the business then so be it, just have to be aware of the possible caveats. Not necessarily right or wrong. Just no silver bullet.
I only had it this way because the user’s are off the older generation and they tend to forget to hit a save button so I moved to live saving. Some have complained about missing characters as the OP mentioned but investing the denounce has certainly helped so far
@David | Fortune Validator If you’re using panels, checkout the unsaved changes alert in v3.2. https://filamentphp.com/docs/3.x/panels/configuration#unsaved-changes-alerts
Also sorry @Wirkhof for contributing to hijacking this thread. 😅
I’m not on this project unfortunately. Well I have it setup and have some more admin style pages. I’d like to fully convert into panel but it’s a monster of a job. I’d love to see the unsaved alerts on Non panel if that’s possible
Thanks guys, I have solved it for now, kind of, as suggested by increasing it to second and a half or little less and it seems to be better. We will see longterm.