Filament•17mo ago

TexInput money mask allow typing forbidden symbols

Mask applied only on blur and doesn't prevent you from typing letters. I guess, it has something to do with the wire:model not working properly with Alpine. It works properly when there's no property "balance" in Livewire\Component class to bind to. But then form validation doesn't work.

Forms\Components\TextInput::make('balance')
   ->numeric()
   ->mask(RawJs::make(<<<'JS'
      $money($input, '.', '')
   JS)),

Forms\Components\TextInput::make('balance')
   ->numeric()
   ->mask(RawJs::make(<<<'JS'
      $money($input, '.', '')
   JS)),

Solution:

firefox issue, I agree

Jump to solution

17 Replies

_kudingOP•17mo ago

LeandroFerreira•17mo ago

remove numeric

TextInput::make('balance')
    ->mask(RawJs::make(
        <<<'JS'
            $money($input)
    JS
    ))

TextInput::make('balance')
    ->mask(RawJs::make(
        <<<'JS'
            $money($input)
    JS
    ))

_kudingOP•17mo ago

Same. I don't think it's connected.

LeandroFerreira•17mo ago

console errors? are you using admin panel?

_kudingOP•17mo ago

No errors. There's only a Livewire warning "unreachable code after return statement" (there are reports about it on livewire discussions). Not sure if it's related.

LeandroFerreira•17mo ago

are you using panel builder?

_kudingOP•17mo ago

Yes, I have a panel

LeandroFerreira•17mo ago

filament version?

_kudingOP•17mo ago

v3.0.5, livewire v3.0.0-beta.6

LeandroFerreira•17mo ago

same here.. but my code works Is it a custom page or are you using resources?

_kudingOP•17mo ago

I have a few resources and a separate custom page with masks. All of them have the same issue https://8000-filamentphp-demo-ovf606pp7lj.ws-eu102.gitpod.io/shop/products/create I've added mask to the price field

Forms\Components\TextInput::make('price')
                                    ->mask(RawJs::make(<<<'JS'
                                        $money($input, '.', '')
                                    JS))
                                    ->required(),

Forms\Components\TextInput::make('price')
                                    ->mask(RawJs::make(<<<'JS'
                                        $money($input, '.', '')
                                    JS))
                                    ->required(),

LeandroFerreira•17mo ago

are you able to insert any value? or only numbers?

_kudingOP•17mo ago

Ok, I see. It's firefox only issue

LeandroFerreira•17mo ago

yep, because its working for me on google chrome..

_kudingOP•17mo ago

Yep. It works on Chrome and numeric() can be active too.

Solution

LeandroFerreira•17mo ago

firefox issue, I agree

_kudingOP•17mo ago

Thanks. I guess it's livewire issue then

Gaming

Programming

TexInput money mask allow typing forbidden symbols