TextInput mask does not work on Firefox

[mtbossa]

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.

Expected behavior

When you configure a mask for the TextInput field, it should work with any browser.

Steps to reproduce

Create a form and configure it's schema with the following code:

Forms\Components\TextInput::make('time')
                    ->required()
                    ->mask('99:99:99')

Reproduction repository

https://github.com/mtbossa/text-input-mask-bug

Relevant log output

No response

[danharrin]

We use Alpine.js's mask library. Please check that, and if is an issue report a bug to that library instead of Filament.

[mtbossa]

We use Alpine.js's mask library. Please check that, and if is an issue report a bug to that library instead of Filament.

@danharrin ok, so I tested it in a Alpine.js index.html, it seems to be working correctly. Did I do something wrong?

I attached a video

https://github.com/filamentphp/filament/assets/45720067/4fddf2dd-dfb0-471c-8a89-6f5ca0d56588

[danharrin]

Try adding the mask inside a Livewire component, having it hidden by default, then visible using a Livewire network request. To replicate what is happening when you use the modal

[elcapo]

I'd suggest reopening the issue as I'm having it in a very similar environment. To add some info, the Alpine page for mask functions shows working masks when opened with the same Firefox browser that ignores masks when used from Filament.

[SevendaysCompany]

We found a temporary fix by changing wire:model to

wire:model.onchange.debounce

[danharrin]

Duplicate of #8560 with more info