Filament•2y ago

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

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

4 Replies

Dan Harrin•2y ago

masks dont work with reactive inputs, sorry i would not use it, instead try numeric()->prefix('Rp') or something simple

BenOP•2y ago

Oh that's good idea. Using the TextInput instead of Mask, right?

Dan Harrin•2y ago

yeah

BenOP•2y ago

Thanks a lot, Dan!

Gaming

Programming

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