FilamentF
Filament•3y ago
Ben

Reactive field and afterStateUpdated is not update in realtime on Forms\Components\TextInput\Mask

I'm currently create a dependent field using reactive() and afterStateUpdate to update the other field's value in money format. It's working normally on basic TextInput in realtime of course, but it become passive when I using the TextInput\Mask. Is there any way to make the mask update in realtime just like the TextInput?

1st video is TextInput, 2nd video is using TextInput\Mask.

Here is the code snippet.
Forms\Components\TextInput::make('amount')
    ->required()
    ->reactive()
    ->default($this->total)
    ->label(__('Amount'))
    ->afterStateUpdated(fn (\Closure $set, $state) => $set('debt', $this->total - $state))
    ->mask(fn (Forms\Components\TextInput\Mask $mask) => $mask->money(prefix: 'Rp ', thousandsSeparator: '.', decimalPlaces: 0)),
Forms\Components\Select::make('product_id')
    ->options(fn () => $this->items->pluck('name', 'id')->toArray())
    ->label(__('Select in debt item'))
    ->required(fn (\Closure $get) => $get('amount') < $this->total)
    ->hidden(fn (\Closure $get) => $get('amount') >= $this->total),
Forms\Components\TextInput::make('debt')
    ->label(__('Debt'))
    ->hidden(fn (\Closure $get) => $get('amount') >= $this->total)
    ->mask(fn (Forms\Components\TextInput\Mask $mask) => $mask->money(prefix: 'Rp ', thousandsSeparator: '.', decimalPlaces: 0)),
Was this page helpful?