Laravel Livewire中laravel-tel-input清空号码自动恢复问题

问题现象 #

在Laravel项目中使用laravel-tel-input组件搭配Livewire开发时，全选删除输入框内的手机号后，号码会自动重新填充回输入框，无法彻底清空。

现有代码 #

自定义组件（input-tel） #

@props([
    'wireModel' => $attributes->whereStartsWith('wire:model')->first(),
])

<div>
    <x-tel-input
        id="phone"
        name="phone"
        class="h-[48px] w-full border-gray focus:ring-4 focus:ring-primary-light focus:border-primary text-black px-4 py-3.5 text-sm md:text-base placeholder-dark-gray placeholder-opacity-90 rounded-lg"
        {{ $attributes->merge(['wire:model' => $wireModel]) }}
    />
    <p class="text-sm text-red" id="error_phone"></p>
</div>
@push('scripts')
    <script>
        const input = document.getElementById('phone');
        const error = document.getElementById("error_phone");

        input.addEventListener('telchange', function(e) {
            if (e.detail.number != '') {
                if (e.detail.valid && e.detail.number.length >= 6) {
                    @if($wireModel)
                        @this.set('{{ $wireModel }}', e.detail.number);
                    @endif
                    error.textContent = null;
                } else {
                    error.textContent = "{{ __(\"Please enter a valid number\") }}";
                }
            }
        });

        window.addEventListener('refreshTelJs', event => {
            var element = document.querySelector('.iti--allow-dropdown');

            if(!element){
                document.dispatchEvent(new Event('telDOMChanged'));
            }
        });

        document.dispatchEvent(new Event('telDOMChanged'));
    </script>
@endpush

组件使用方式 #

<div wire:ignore>
   <x-input-tel id="phone" name="phone" class="block mt-1 w-full" wire:model.defer="phone"/>
   <x-jet-input-error for="phone" class="mt-1"/>
</div>

问题原因 #

当前代码仅在e.detail.number非空时同步更新Livewire属性，当号码被清空（e.detail.number为空）时，没有同步清空Livewire对应的属性。Livewire仍保留旧的手机号值，导致组件重新渲染时将旧值回填到输入框。

修复方案 #

修改自定义组件中的telchange事件监听代码，增加空值处理逻辑，当号码清空时同步更新Livewire属性为空：

input.addEventListener('telchange', function(e) {
    if (e.detail.number != '') {
        if (e.detail.valid && e.detail.number.length >= 6) {
            @if($wireModel)
                @this.set('{{ $wireModel }}', e.detail.number);
            @endif
            error.textContent = null;
        } else {
            error.textContent = "{{ __(\"Please enter a valid number\") }}";
        }
    } else {
        // 当号码为空时，同步清空Livewire绑定的属性
        @if($wireModel)
            @this.set('{{ $wireModel }}', '');
        @endif
        error.textContent = null;
    }
});

同时保持现有wire:ignore的包裹方式，避免Livewire直接操作输入框DOM，确保组件交互由自定义脚本控制。

内容的提问来源于stack exchange，提问作者Kishan