TextInput live onBlur does not seem to work as expected

I have this test and name field in my form:

Forms\Components\TextInput::make('test')
  ->maxLength(255),
              
Forms\Components\TextInput::make('name')
  ->required()
  ->maxLength(255)
  ->live(onBlur: true)
  ->afterStateUpdated(function ($state, Set $set) {
  $set('test', $state);
}),

Forms\Components\TextInput::make('test')
  ->maxLength(255),
              
Forms\Components\TextInput::make('name')
  ->required()
  ->maxLength(255)
  ->live(onBlur: true)
  ->afterStateUpdated(function ($state, Set $set) {
  $set('test', $state);
}),

Where I expect the name field to only trigger the afterStateUpdated() method when I leave the field, but I am experiencing that the live update is happening while the name field is still focused. Is this the expected behaviour? I have attached a screen recording of the behaviour explaining the issue.

Solution:

I had to refresh the page, then live(onBlur: true) works as expected.

Jump to solution

15 Replies

Solution

nowak•9mo ago

I had to refresh the page, then live(onBlur: true) works as expected.

Jon Mason•9mo ago

I'm still seeing this not working as expected. A request is sent as soon as a value is entered.

nowakOP•9mo ago

@Jon Mason Did you refresh your page? Please share your current code.

Jon Mason•9mo ago

yes, I've refreshed, built, updated filament, everything I can think of.

     TextInput::make('paymentBeforeDiscount')
                ->currencyMask(',', '.', 2)
                ->disabled(fn (Get $get) => !$get('apply_partial_payment'))
                ->prefix('$')
                ->live(onBlur: true)
                ->default($this->paymentData['total_before_discounts'])
                ->afterStateUpdated(function (Set $set, $state) {
                    $set('payment_amount', number_format($state - ($this->document->statementPayment->discount_amount / 100), 2));
                })
                ->regex('/^[0-9]+(\.[0-9]{2})$/i') 
                ->validationMessages([
                    'regex' => 'Must include a decimal point and at least one digit before and exactly 2 digits after the decimal point. (e.g. 100.00)'
                ]),

     TextInput::make('paymentBeforeDiscount')
                ->currencyMask(',', '.', 2)
                ->disabled(fn (Get $get) => !$get('apply_partial_payment'))
                ->prefix('$')
                ->live(onBlur: true)
                ->default($this->paymentData['total_before_discounts'])
                ->afterStateUpdated(function (Set $set, $state) {
                    $set('payment_amount', number_format($state - ($this->document->statementPayment->discount_amount / 100), 2));
                })
                ->regex('/^[0-9]+(\.[0-9]{2})$/i') 
                ->validationMessages([
                    'regex' => 'Must include a decimal point and at least one digit before and exactly 2 digits after the decimal point. (e.g. 100.00)'
                ]),

awcodes•9mo ago

Can you try it without the currencyMask()

Jon Mason•9mo ago

Same result

awcodes•9mo ago

Hmm. Not seeing anything obvious. Try removing things one at a time to see if you can track it down. Not often but sometimes the order of the modifiers can matter.

gon.exe•8mo ago

@Jon Mason I am having the same issue. Did you fix it ? Thanks in advance!

Jon Mason•8mo ago

couldn't remember and was just looking at my code again. I haven't changed anything, and it looks like this isn't happening anymore. May try updating filament. actually, I take that back, just realized this was about the requests getting sent immediately. I am still seeing this. I think I just gave up on it honestly. actually, seems to be the ->currencyMask() that's causign it. Commenting that out makes it work as expected. I really want the currency mask though, so i'm ignoring the many requests it's sending.

gon.exe•8mo ago

Thanks @Jon Mason I just resolved the issue on my side putting the live() property after reactive()

awcodes•8mo ago

You shouldn’t have live and reactive. They do the same thing. Reactive is legacy from v2.

Jon Mason•8mo ago

I didn't know this...that's super helpful. I've wondered about that because it never made sense to me.

gon.exe•8mo ago

@awcodes thank you for your answer. I started my app using Filament v1 and I updated it to v2 and currently to v3. So I understand that the ->reactive() property to create dependant fields is replaced by ->live(). I am right?

gon.exe•8mo ago

I just confirmed by myself on vendor/filament/forms/src/Concerns/HasStateBindingModifiers.php:

public function reactive(): static
{
    $this->live();

    return $this;
}

public function reactive(): static
{
    $this->live();

    return $this;
}

Ali•3d ago

I had the same issue for days, and i just found out that reactive is Legacy. so ->live(any param) won't work just because i reactive() next to live() function. So removed reactive() and everything works well now.

Gaming

Programming

TextInput live onBlur does not seem to work as expected