Text input masks are not working properly in Firefox

elcapo commented 1 year ago

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 cases. But if a mask is added to an input outside a Filament resource, in a single Livewire component, the same mask works (also in Firefox).

Notes:

Firefox 117.0.1 was used for the tests.
This issue is related with https://github.com/filamentphp/filament/issues/8047.

Filament

The input was created as in the input masking documentation:

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

... and it's being rendered properly, although the rendered input works in Firefox like it didn't have any mask:

<input class="fi-input block w-full border-none bg-transparent py-1.5 text-base text-gray-950 outline-none transition duration-75 placeholder:text-gray-400 focus:ring-0 disabled:text-gray-500 disabled:[-webkit-text-fill-color:theme(colors.gray.500)] disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.400)] dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400 dark:disabled:[-webkit-text-fill-color:theme(colors.gray.400)] dark:disabled:placeholder:[-webkit-text-fill-color:theme(colors.gray.500)] sm:text-sm sm:leading-6 ps-3 pe-3" id="data.masked" type="text" wire:model="data.masked" x-data="{}" x-mask:dynamic="$money($input)">

See it in the reproduction repository.

Livewire

In the same repository, a Livewire version of the input was created:

<div>
    <input x-mask:dynamic="$money($input)">
</div>

... with the diference that this version, opened with the same Firefox version, respects the mask as expected.

See it in the reproduction repository.

Expected behavior

Masks would work in Firefox as they do when used in a Livewire (without Filament) component.

Steps to reproduce

The reproduction repository offers two different URLs that facilitate testing an input mask from both Filament and from a stripped Livewire component:

/admin/play-grounds/create: will take you to a page with a masked input (with a money mask) that was created following the input masking documentation but doesn't work in Firefox,
/masked-input-test: will take you to a page with a masked input (with a money mask) that works properly in all browsers, Firefox included.

Reproduction repository

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

Relevant log output

No response

danharrin commented 1 year ago

Please suggest some actionable steps that maintainers of Filament can take to fix this in Filament, that don't involve reporting this bug to Alpine.js on your behalf.

elcapo commented 1 year ago

Please suggest some actionable steps that maintainers of Filament can take to fix this in Filament, that don't involve reporting this bug to Alpine.js on your behalf.

In the reproduction repository that I created exclusively for illustrating this issue, I included two use cases:

one that involves Filament, where the mask fails (in Firefox),
a second one that involves Alpine.js used directly in a Livewire (non Filament) compoennt, where the mask works (in Firefox).

This, in principle, tells me that the issue is not in Alpine.js but in how Filament uses it. If this was an Alpine issue, I'd expect the Livewire component mask to also fail in Firefox (but it works).

diovanemonteiro commented 1 year ago

I am facing the same problem in my app made laravel, livewire 3, alpinejs and alpine mask plugin. Masking does not work in Firefox. Apparently it's a problem with alpine in livewire 3, not sure.

TracyHare commented 1 year ago

I can confirm that, using only x-mask="(999) 999-9999" with Livewire 3 works fine on Safari and Chrome (on my Mac). It doesn't work live on Firefox, but it does transform to the mask on blur.

I pushed the normal Alpine script (//unpkg.com/alpinejs) to the component that I'm using the mask on, and live masking now works in all three browsers.

danharrin commented 11 months ago

It's a LW bug. The reason you cant replicate it in the reproduction repository is because you're missing a wire:model.

Add this to the LW class:

public $test = '';

And update the input:

<input wire:model="test" x-mask:dynamic="$money($input)">

Not working:

https://github.com/filamentphp/filament/assets/41773797/394c9cbd-1299-49b2-adf5-4808064c033a

SevendaysCompany commented 11 months ago

We found a temporary fix by changing wire:model to

wire:model.onchange.debounce

filamentphp / filament