Filament•3mo ago

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•3mo 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•3mo ago

Hey - Great to hear from you! I had a feeling you may mention onBlur. I will give it a go.

awcodes•3mo 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•3mo 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•3mo ago

No worries. Just pointing it out. Cheers.

SirFat•3mo ago

Appreciate it as always

Gaming

Programming

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