F
Filament9mo ago
SirFat

Password (and other fields) truncates themselves on screen (possibly due to live())

Hi, I'm after some guidance on how best to debug this. When entering a password (or some text inputs) the field appears to auto-truncate itself. I can see it performing an 'update' AJAX call at the same time it occurs. I thought it was just me, but people helping test have seen it as well (see https://internal-development.asmorphic.com/ (register). I have upgraded, cleared all caches, put it in production mode but I experience the same symptom. The password field is basically the vanilla register field with strength detection from the Laravel Daily team.
->live()
->password()
->label(__('filament-panels::pages/auth/register.form.password.label'))
->required()
->rule(Password::default())
->dehydrateStateUsing(fn ($state) => Hash::make($state))
->same('passwordConfirmation')
->revealable(filament()->arePasswordsRevealable())
->validationAttribute(__('filament-panels::pages/auth/register.form.password.validation_attribute'))
->afterStateUpdated(function ($state, Set $set) {
if (empty($state)) {
return;
}
$score = (new Zxcvbn())->passwordStrength($state)['score'];
$set('strengthScore', $score);
$this->dispatch('update-score', score: $score);
}
->live()
->password()
->label(__('filament-panels::pages/auth/register.form.password.label'))
->required()
->rule(Password::default())
->dehydrateStateUsing(fn ($state) => Hash::make($state))
->same('passwordConfirmation')
->revealable(filament()->arePasswordsRevealable())
->validationAttribute(__('filament-panels::pages/auth/register.form.password.validation_attribute'))
->afterStateUpdated(function ($state, Set $set) {
if (empty($state)) {
return;
}
$score = (new Zxcvbn())->passwordStrength($state)['score'];
$set('strengthScore', $score);
$this->dispatch('update-score', score: $score);
}
6 Replies
awcodes
awcodes9mo ago
Probably need to debounce the live() or make it onBlur. What’s happening is common in livewire with slow requests. The user is typing faster than the request can come back so the dom dif wipes out anything since the request was sent. For this use case I would recommend->live(onBlur: true) That way the request will only be made when the field looses focus.
SirFat
SirFatOP9mo ago
Hey - Great to hear from you! I had a feeling you may mention onBlur. I will give it a go.
awcodes
awcodes9mo ago
Not sure if it’s intended or not, but the strength meter is animating from load. At least on my phone. By head says it should be hidden until the user puts in a password, but may not be the requirement for the app. 🙂
SirFat
SirFatOP9mo ago
I just copied filamentexamples.com - I just have some wholesale shifting of the service registration and then i'll be doing some house keeping yeah makes sense to me, presumably I'd just use hidden(fn .. for that
awcodes
awcodes9mo ago
No worries. Just pointing it out. Cheers.
SirFat
SirFatOP9mo ago
Appreciate it as always
Want results from more Discord servers?
Add your server