afterStateUpdated results in unpredictable result
Straight from Filament docs, i am trying to use afterStateUpdated to generate a Slug for the field.
I am attaching a video as it is not possible for me to explain in proper english.
Shortly, i type a name into the field, and expecting a slug to be updated automatically.
It is, however it is updated randomly, not what i am typing, and it also changes what i type into the name field.
Then, when i try to backspace delete, it is more funny, as it does not delete, actually sometime it delete the lette,r and sometime it create a letter in field 😄
Please see the video, you will see i am typing a title, and you will see what happen.
I tried to type- This is my name
Then i tried to delete it with backspace, to correct it.
Then, i typed very very slow and this is only way to get it work.
What do i missing?
16 Replies
Just to mention- i did tried ->debounce() and it works, but need to give it a high debounce value, as some titles, they need time to be typed, And if you make a pause while typing, same original problem i mention above is back.
Another great candiate for
onBlur: true
I don't see any value that the slug must be converted instantly. Just do it whenever you blur the title field? 🤔 This avoids your current problem and is the better UX imho anyway 😊Hello, and thank you for the reply. However, i am afraid you have missed the point here. This issue is rather related to a documents example, not UX, or possible solutions.
I am wondering WHY something documented does work so bad, and if i am missing something there.
Not should i use debounce, or onBlur: true 🙂
But i am thankful for you insight ❤️
That’s how livewire works. When you make something ‘live’ it has to go to the server, get the response, then do a dom diff. This is why blur exists. So that it doesn’t make those server calls while typing.
And it doesn't work so bad, that is server dependant. My mac server responses keep fast and intact on typing because it's got a fast response. Slower responding server will show exactly what you are seeing.
Thanks for the input 🙂 i disagree that this what i facing really depends on server. I am running macbook pro 32 GB ram, M1, literally only this is slow 🙂
thanks for reply, i know how it works and how livewire will send it to server on live() on each of my inputs. Just saying that live() without onBlur is not really usable, not in this case from Filament docs, would you agree?
It does exactly what it says it does. It’s a livewire convention so not something filament can control.
It’s as usable as your server performance.
Personally, I never do live on text inputs. I always do them with onBlur
Thank, much appreciated sharing your experience. I ll use onBlur as well.
Are you using debugbar?
not at the time of making a video. added barry's debug bar today tho.
And what stack are you using?
not really sure what do you mean by stack.
Herd, Docker, Brew
Herd
Dunno then, works fasttt for me 🙂
thanks 🙂 i have no issues with it. I probably have not expalined it properly. Anyway, i am not using live, and i dont need to edit/write slug. My package cares of slug for me. I just wondering why example from docs works so ugly on my super fast computer. 😉 Again, thank you and @awcodes for jumping in and explaining, much appreciated and greetings from old dude! ❤️