Skip to content

Conversation

@joshhanley
Copy link
Collaborator

Currently if you have are using x-mask with Livewire and you are using wire:model.live, x-mask is triggering a network request on page load and changing the default value from null to an empty string.

Loading the below Volt component immediately triggers a request and the dd() is called.

This PR fixes it by adding a check to see if the _x_model value is the same as what is being set by the mask and skips the set. Or if the set value is an empty string and the _x_model value is null then it will also skip it. This is only for the initial load of the mask. Everything else should still run the same.

Fixes livewire/flux#751

<?php

use Livewire\Volt\Component;

new class extends Component {
    public $phone_number_masked;
    public $phone_number;

    public function updated()
    {
        dd('masked', $this->phone_number_masked, 'not masked', $this->phone_number);
    }
};

?>

<div>
    <input type="text" wire:model.live="phone_number_masked" x-mask="99999-999999" />
    <input type="text" wire:model.live="phone_number" />
</div>
image

@calebporzio calebporzio merged commit b03a52d into main Dec 23, 2024
2 checks passed
@joshhanley joshhanley deleted the josh/fix-mask-triggering-updates-on-load branch December 23, 2024 19:56
@filiptaka
Copy link

This fix doesn't fully fix the issue (Tested in filament/livewire). In Filament the el._x_model.get() is undefined which is not the same as null.
So it should probably require another line:

                if (el._x_model.get() === undefined && el.value === '') return

@billmn
Copy link

billmn commented Sep 24, 2025

Any update about this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Input Masking return empty string instead of null

5 participants