Input Masking return empty string instead of null

[devfaysal]

Flux Version v1.0.24
Laravel Version 11.33.2

    #[Validate('nullable')]
    public $phone_number;

    public function update()
    {
        $this->validate();
        dd($this->phone_number);
    }

<form wire:submit="update">
          <flux:input wire:model="phone_number" label="Phone Number" mask="99999-999999" placeholder="Your phone number" />
          <flux:button type="submit" variant="primary" class="w-full">Update</flux:button>
  </form>

The phone number is an empty string when submitted without writing anything in the input
"" // app/Livewire/Test.php:16

If I remove the mask then it returns null
null // app/Livewire/Test.php:16

As Laravel uses convertEmptyStringsToNull by default, the null should be the correct value if the input does not have anything.

But the masking is doing something wrong.

[joshhanley]

Here's a Volt component to make testing this easier. The first input has the mask and the second doesn't. If you click the update button you will see phone_number_masked is an empty string and phone_number is null.

<?php

use Livewire\Volt\Component;

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

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

?>

<flux:main>
    <form wire:submit="update">
        <flux:input wire:model="phone_number_masked" label="Phone Number" mask="99999-999999" placeholder="Your phone number masked" />
        <flux:input wire:model="phone_number" label="Phone Number" placeholder="Your phone number" />
        <flux:button type="submit" variant="primary" class="w-full">Update</flux:button>
    </form>
</flux:main>

[joshhanley]

@devfaysal thanks for reporting! Turns out this wasn't an issue in Flux but instead it was a problem in Alpine's x-mask plugin. I've submitted a PR to Alpine with a fix alpinejs/alpine#4481. So going to close this issue.

[devfaysal]

Thank you very much