No longer reactive with Livewire.

[vahnmarty]

<x-tel-input wire:model="test"  id="phone"/>
                {{ $test }}

In Livewire

{

 public $test = '1234';
}

[ousid]

Hey, @vahnmarty

Can you share some details about the implementation of laravel-tel-input inside your project?

[stojankukrika]

I also have issue in liveware component:

<x-tel-input wire:model="phone" id="phone" name="phone" class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-white focus:border-easyvation-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-800 dark:focus:shadow-outline-gray form-input form-input" />

and when submit the form I get an empty string for the phone.

[stojankukrika]

even do not send request on type numbers like in other form fields...

[Geovanek]

For me there was also no reactivity from wire:model="phone".

document.addEventListener("livewire:load", () => {
    phone.addEventListener('telchange', function(e) {
        window.Livewire.emit('telchange', e.detail);
    });
});

And in the component I did like this:

public $phone;
public $phoneValid;

protected $listeners = [
    'telchange',
];

public function telchange($telchange)
    {
        $this->phoneValid = $telchange['valid'];
        $this->phone = $telchange['number'];
    }
    

    public function register()
    {
        $this->withValidator(function (Validator $validator) {
            $validator->after(function ($validator) {
                if ($this->phone === '') {
                    $validator->errors()->add('phone', __('O campo telefone é obrigatório.'));
                }
                if ($this->phoneValid === false) {
                    $validator->errors()->add('phone', __('Número de telefone inválido.'));
                }
            });
        })->validate();
    ...

On blade:

    <div class="form-group">
            <label for="phone">{{ __('Phone') }}</label>
            <x-tel-input wire:model.lazy="phone"
                id="phone" name="phone"
                class="form-control-rounded form-control"/>
            @error('phone')
                <span class="invalid-feedback" role="alert" style="display: block">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
    </div>