Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix x-mask triggering update requests on load #4481

Merged
merged 2 commits into from
Dec 23, 2024

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
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
2 participants