Alpine mask isn't work in Firefox

[diovanemonteiro]

Alpine mask is not working with Livewire 3 in Firefox.

[ekwoka]

Can you show some example code?

[diovanemonteiro]

I am using Laravel 10, Livewire 3, and Alpine.js 3.13 in my project.

app.js

import './bootstrap';

View

<div class="col-span-6 sm:col-span-3">
    <x-input-label for="data_inscricao" :value="__('Data da Inscrição')"/>
    <x-text-input id="data_inscricao" name="data_inscricao" wire:model="data_inscricao" type="text" class="mt-1 block w-full" x-mask="99/99/9999" placeholder="dd/mm/yyyy"/>
    <x-input-error class="mt-2" :messages="$errors->get('data_inscricao')"/>
</div>

[Capati]

Any fix? I'm having the same problem, Livewire 3 ships with AlpineJS by default.

[ekwoka]

Based on some other issues brought up recently, I think this is an issue with wire:model and not x-mask. It seems to take the value before mask has done anything.

[SevendaysCompany]

We found a temporary fix by changing wire:model to

wire:model.onchange.debounce

[mtbossa]

We found a temporary fix by changing wire:model to

wire:model.onchange.debounce

This actually made my TimePicker component work in Firefox! Here's what I did:

class TimePicker extends TextInput
{
    /**
     * This is necessary for this Component to work on Firefox.
     */
    protected ?array $stateBindingModifiers = [
        'wire:model.onchange.debounce'
    ];
    
    public function getExtraAlpineAttributes(): array
    {
        return [
            'x-data' => '{ time: "" }',
            'x-model' => 'time',
            'x-on:input' => RawJs::make(<<<'JS'
            let value = $el.value.replace(/[^0-9]/g, ''); // Remove non-numeric characters
            if (value.length > 4) value = value.slice(0, 4); // Limit to 4 digits

            let hh = value.slice(0, 2);
            let mm = value.slice(2, 4);

            if (hh.length === 2) {
                let hours = Math.min(Math.max(parseInt(hh, 10), 0), 23);
                hh = String(hours).padStart(2, '0');
            }

            if (mm.length === 2) {
                let minutes = Math.min(Math.max(parseInt(mm, 10), 0), 59);
                mm = String(minutes).padStart(2, '0');
            }

            $el.value = (hh && mm) ? hh + ':' + mm : hh;
        JS),
            'maxlength' => '5',
        ];
    }
}

EDIT: It fixes the issue, but it also makes ->live() not work anymore, I'll try to figure out how to make it work.