TextInput live onBlur does not seem to work as expected

[untold sparrow]

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);
}),

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.

[signal sand]

To help others find answers, you can mark your question as solved via Right click solution message -> Apps -> ✅ Mark Solution

[untold sparrow]

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

[signal sand]

Thank you for marking this question as solved!

Learn more

https://answeroverflow.com

[willow mulch]

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

[untold sparrow]

@willow mulch Did you refresh your page? Please share your current code.

[willow mulch]

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)'
                ]),

[undone flame]

Can you try it without the currencyMask()

[willow mulch]

Same result

[undone flame]

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.

[unique sinew]

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

[willow mulch]

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.

[unique sinew]

Thanks @willow mulch

I just resolved the issue on my side putting the live() property after reactive()

[undone flame]

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

[willow mulch]

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

[unique sinew]

@undone flame 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?

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

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

    return $this;
}