Livewire Telephone Input

Hey @joeseph chen

I use this package for my phone dilemmas: https://github.com/Propaganistas/Laravel-Phone

It also has validation helper so you could validate your phone using it and livewire validation logic.

I'm not too sure if you even need to use alpinejs in that case, you can skip the whole country selection to be honest, just validate like this:

$m->to = PhoneNumber::make($a->user->phone, ['UK', 'DE', 'FR'])->formatE164();

It works quite well for me.

Hello, you have almost same code as me. My problem : I lose "formatting" of the numbers after change on another field (after livewire refresh). Despite the use of "wire:ignore"

maybe my code can help you ?

<div class="col-span-6 sm:col-span-2" wire:ignore>
    <x-frontoffice.input.tel label="Mobile phone" :required="true" format="vertical"
                             x-data=""
                             x-ref="mobile_number" autocomplete="off"
                             x-init="()=> { myIntlTelInput($refs.mobile_number);}"
                             x-on:change="let number = window.intlTelInputGlobals.getInstance($refs.mobile_number).getNumber(); console.log(number);$dispatch('input',number)"
                             model-name="user.mobile_number"></x-frontoffice.input.tel>
</div>

external JS function is

window.myIntlTelInput = function (input) {
    //Ajout un petit delai pour que livewire ai le temps de mettre la valeur dans le champ
    setTimeout(() => {
        intlTelInput(input, {
            preferredCountries: [],
            initialCountry: "auto",
            utilsScript: "utils.min.js",
            geoIpLookup: function (success, failure) {
                let country = Cookies.get('ipcountry');
                if (country !== undefined) {
                    success(country);
                    return;
                }

                fetchJsonp("ipinfo.io").then(function (response) {
                    return response.json()
                }).then(function (json) {
                    let countryCode = (json && json.country) ? json.country : "us";
                    Cookies.set('ipcountry', countryCode, {expires: 7});
                    success(countryCode);
                }).catch(function (ex) {
                    console.log('parsing failed', ex);
                });

            }
        });
    }, 200);
}

ps: I use "Cookie" for limit call to ipinfo

Ok, i found a solution for my refresh format problem...

In my save function in livewire emit an event

 public function save()
    {
        $this->validate();
        $this->user->save();
        $this->emit('toast', 'success', __('Saved successfully'));
        $this->emit('refreshPhoneFields');
    }

And in Javascript

 @push('scripts')
        <script>
            Livewire.on('refreshPhoneFields', () => {
                let instance = window.intlTelInputGlobals.getInstance(document.getElementById('user.mobile_number'));
                instance.setNumber(instance.getNumber());
                instance = window.intlTelInputGlobals.getInstance(document.getElementById('user.work_number'));
                instance.setNumber(instance.getNumber());
                instance = window.intlTelInputGlobals.getInstance(document.getElementById('user.fixedline_number'));
                instance.setNumber(instance.getNumber());
            })
        </script>
    @endpush

I know this is an old thread, but for anyone looking for Laravel Blade and Livewire Intl-Tel-Input integration, try this wrapping package: https://github.com/victorybiz/laravel-tel-input

Just wrap your div withe wire:ignore and add wire"key=""uniqueKey a unique key for your input and add the vanilla js to the scripts or use alipne. Works fine. Wire:key does the job

<div class="form-group col-lg-12" wire:ignore>
   <input type="tel" id="phone" class="form-control " wire:key="uniqueKey">                                
 </div>