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

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

Jon Mason•10mo ago

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

nowakOP•10mo ago

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

Jon Mason•10mo 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•10mo ago

Can you try it without the currencyMask()

Jon Mason•10mo ago

Same result

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

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

Jon Mason•9mo 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•9mo ago

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

awcodes•9mo ago

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

Jon Mason•9mo ago

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

gon.exe•9mo 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•9mo 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•2mo 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

Did you find this page helpful?