I want to delete phone number when I remove value from tel-input

Question

I'm using victorybiz/laravel-tel-input and I have component in my laravel project. So prolem is that when I'm enter phone number and after remove number the whole number using select then the number again set to my input box.

I have created component like below:

@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

And I'm using this component like:

<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>

I want to delete number from input box when I remove the number. And using laravel with livewire.

For more information about this package you can find here: https://github.com/victorybiz/laravel-tel-input

Answer 1

Answer

-> To delete the phone number from the input box when the user removes it, you can use the following JavaScript code:

const phoneInput = document.getElementById('phone');

phoneInput.addEventListener('input', function(e) {
  if (e.target.value === '') {
    // Clear the phone number from the Livewire model.
    @this.set('phone', '');
  }
});

-> This code will listen for input events on the phone input field. When the user enters an empty string into the input field, the code will clear the phone number from the Livewire model.

-> To use this code, you will need to add it to the scripts section of your Livewire component. You can then use the component in your view like this:

<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>

-> Once you have added the code to your component and your view, you will be able to delete the phone number from the input box by entering an empty string into the field and pressing

-> I think this will help you.