livewire loop

[jbajou]

Hello,

I'm trying to use this package to display a telephone field with country selector in a Livewire component. The input is not shown when loading the page.

I see in the network tab that it keeps firing changes when the phone number is empty, resulting in the loop communication with the Livewire component. It looks like there is a JS event fired like a 'change' for example, resulting in Livewire trying to update the phone number.

Here is how I use it:

<x-tel-input wire:model.lazy="customer.phone" type="text" id="telephone" placeholder="{{ __('+301234567890') }}" name="telephone" />

I see that the 'telchange' event is fired a lot of time, even if the filed is not visible yet to the user. With Chrome, it loops for an infinite time. Something updated the customer.phone, Livewire sees a change event (or something like this), uploads it internally, and again and again.

Am I doing something wrong ? Any idea ? No error in JS console.

Thanks

[jbajou]

anyone please ?

[jbajou]

still no-one ? really ?

[victorybiz]

Sorry for the late response, I have been away. Can you please share codes from your component class and the view blade files as well as errors in your console?

[jbajou]

Sure.

@laravelTelInputScripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<script>
    telephone.addEventListener('telchange', function(e) {
        document.getElementById("phone_country").value = e.detail.dialCode;
    });
</script>

The blade file:

<label for="telephone" class="...">Phone<span class="font-bold text-red-600">*</span></label>
<x-tel-input wire:ignore  wire:model.lazy="customer.phone" type="text" id="telephone" placeholder="+301234567890" name="telephone" class="..." />
<input wire:model="phone_country" type="hidden" id="phone_country" name="phone_country">

Nothing funky in the livewire component class, no event listener or anything like this.

No error in the console, just a crazy amount of network events, looping

I hope this helps!

[victorybiz]

Please follow the installation guide on the README, I will recommend you install intl-tel-input with a package manager, ensure the @laravelTelInputScripts directive is placed after scripts from libraries like Livewire and the intlTelInput script (if using a CDN).

wire:ignore should be removed from component.

[jbajou]

I did, and I remove the wire:ignore which, you are right, was not making any sense here. We're having the exact same problem only if the field is not visible from the page load. In our case, it's visible when the user does an action (display with entangle()) and it goes into loop. If we move the field to another part of the same blade, shown directly on page load, no problem.

Does it ring a bell to you ?

[jbajou]

it is now clear that this is happening when the field is not visible on page load. We changed our architecture (not related), now the field is visible on page load, and everything works as expected.

[jbajou]

So it turns out we just had the issue again and could not live without fixing it.

After investigation, the package doesn't behave well in nested components. I'm PR-ing a fix