Filament•11mo ago

TextInput does not add mask to field

Sorry for the bad english. I have problems when I add a TextInput with mask, because the mask is not added. When inspecting an element in firefox I see that two blur and two input events are loaded, one from the filament and the other from the livewire, when I cancel the propagation of the livewire by inspecting the mask it works normally, but I haven't found a way to do that in the code. I'm making use of the Resource, creating the TextInput.

public static function form(Form $form): Form
{
      return $form
        ->schema([
            Section::make('Dados Gerais')
                ->icon('heroicon-o-document-text')
                ->schema([
                    Select::make('user_id')
                        ->label('Responsável')
                        ->relationship('user', 'name')
                        ->required(),
                    TextInput::make('nome')
                        ->label('Nome Academia')
                        ->required()
                        ->maxLength(255),
                    TextInput::make('cnpj')
                        ->label('CNPJ')
                        ->mask('99.999.999/9999-99')
                        ->placeholder('99.999.999/9999-99')
                        ->required()
                        ->maxLength(18)
                ]),
                // other methods
          ]);
}

public static function form(Form $form): Form
{
      return $form
        ->schema([
            Section::make('Dados Gerais')
                ->icon('heroicon-o-document-text')
                ->schema([
                    Select::make('user_id')
                        ->label('Responsável')
                        ->relationship('user', 'name')
                        ->required(),
                    TextInput::make('nome')
                        ->label('Nome Academia')
                        ->required()
                        ->maxLength(255),
                    TextInput::make('cnpj')
                        ->label('CNPJ')
                        ->mask('99.999.999/9999-99')
                        ->placeholder('99.999.999/9999-99')
                        ->required()
                        ->maxLength(18)
                ]),
                // other methods
          ]);
}

17 Replies

LeandroFerreira•11mo ago

filament version? Would you like to try this? https://github.com/leandrocfe/filament-ptbr-form-fields

GitHub

GitHub - leandrocfe/filament-ptbr-form-fields: This package provide...

This package provides custom form fields for Filament (>=v2.17.28) that are commonly used in Brazilian web applications, such as CPF/CNPJ validation, phone number formatting, money with curr...

Maagalhaes•11mo ago

Thanks for answering. I'm using version 3.0 of filament. From the documentation it seems very simple to use, but the field is applying the mask only in the "change", when it loses focus, and alpine.js applies the mask as you type. This package is interesting, I'm going to test it, but I'm still curious why my mask method doesn't work as it should.

awcodes•11mo ago

I’m still not convinced this isn’t a bug with the Lw / alpine merger.

Maagalhaes•11mo ago

I installed the mentioned package, but I'm having the exact same problem, I type in the field as if it doesn't have a mask, but as soon as I remove the focus it adds the mask. I went to the alpine website and took the mask example and by inspecting it I added it to my page, this field worked normally, it added two events to this field, blur and filament input. My fields added via TextInput add the duplicated events (filament and livewire).

LeandroFerreira•11mo ago

maybe you can create a repo on github and we can take a look

Maagalhaes•11mo ago

Yes, here is the repository. https://github.com/Maagalhaes/testing-input-mask

LeandroFerreira•11mo ago

did you try on chrome? Firefox issue I think

Maagalhaes•11mo ago

I use firefox, I'll try in chrome. Really, in chrome it works, but in firefox it doesn't. Do you have a suggestion of what can be done to work around this problem?

Maagalhaes•11mo ago

I noticed that in chrome two events are also loaded, what changes is the order between them. I don't know if it makes a difference, but in the images Chrome first shows the filament event, while in Firefox it shows the livewire event.

mtbossa•11mo ago

Hey guys, so, I've noticed the same issue in Firefox. I've opened a issue in filament repo, however, I got the following reply: https://github.com/filamentphp/filament/issues/8047#issuecomment-1692379733

GitHub

TextInput mask does not work on Firefox · Issue #8047 · filamentphp...

Package filament/forms Package Version v3.0.32 Laravel Version v10.20 Livewire Version No response PHP Version v8.2.9 Problem description TextInput with mask does not work on Firefox browser. Expec...

mtbossa•11mo ago

Then, I replied with a video, if you guys could check and see if I'm correct...

awcodes•11mo ago

Can you check it in a livewire component. With v3 livewire and alpine are integrated together. So while it may still work with stand-alone alpine there could still be a bug with the LW / Alpine integration.

mtbossa•11mo ago

Ok, I'll try it, after that I reply here. Thanks

carloscapote•10mo ago

@mtbossa, Have you tried this since the last message? I've found some weird behaviors that I think that are related: 1. any Alpine mask seems to be ignored in Firefox when used from Filament, 2. in a clean Alpine project (or even in this page: https://alpinejs.dev/plugins/mask) the Alpine masks actually work smoothly in Firefox.

Installation — Alpine.js

mtbossa•10mo ago

I haven't, actually. I'm more focused on the features right now, but I'll probably need to get back to it, so I'll have to test this anyway. But I noticed the same that you did I was hoping someone would test/fix this

carloscapote•10mo ago

FYI: I just created a new issue as I couldn't reopen yours. This time I included a reproduction case in which I show that the same mask used in a Livewire component without Filament, actually works (in Firefox): https://github.com/filamentphp/filament/issues/8560

GitHub

Text input masks are not working properly in Firefox · Issue #8560 ...

Package filament/filament Package Version v3.0.52 Laravel Version v10.2.6 Livewire Version v3.0.5 PHP Version 8.2.9 Problem description Input masks are not working in Firefox. At least, not in some...

mtbossa•10mo ago

Nice job!

Gaming

Programming

TextInput does not add mask to field