F
Filament•2y 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)),
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
Dan Harrin•2y ago
masks dont work with reactive inputs, sorry i would not use it, instead try numeric()->prefix('Rp') or something simple
Ben
BenOP•2y ago
Oh that's good idea. Using the TextInput instead of Mask, right?
Dan Harrin
Dan Harrin•2y ago
yeah
Ben
BenOP•2y ago
Thanks a lot, Dan!

Did you find this page helpful?