© 2026 Hedgehog Software, LLC

TwitterGitHubDiscord
More
CommunitiesDocsAboutTermsPrivacy
Search
Star
Setup for Free
FilamentF
Filament•3y ago•
5 replies
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)),
Filament banner
FilamentJoin
A powerful open source UI framework for Laravel • Build and ship admin panels & apps fast with Livewire
20,307Members
Resources
Was this page helpful?

Similar Threads

Recent Announcements

Similar Threads

TextInput afterStateUpdated() reactive weird behavior
FilamentFFilament / ❓┊help
3y ago
afterStateUpdated() not triggering on TextInput
FilamentFFilament / ❓┊help
3y ago
Update TextInput programmatically in reactive way
FilamentFFilament / ❓┊help
3y ago
TextInput does not add mask to field
FilamentFFilament / ❓┊help
3y ago