Проблемы Laravel Livewire DOM с пользовательским JS

Вы можете избежать обновления DOM с помощью Livewire, используя Wire:ignore, например, окружив входы <div>:

<div class = "w-full py-2 lg:w-1/2 md:w-1/2 px-2 grid grid-cols-1">

    <label .... > .... </label>
    
    <div class = "...." wire:ignore>
       <input .... />
    <div>

    .....

Обратите внимание, что вы назначаете один и тот же идентификатор обоим входам: это не очень хорошая практика, идентификатор должен быть уникальным. Вы можете выбрать другой атрибут для выбора входных данных, например:

const elementsWithPhoneId = document.querySelectorAll("input[type=tel]");

конкретный класс может быть другим вариантом.

Кроме того, атрибуты for ваших меток не соответствуют соответствующему входному идентификатору.

Редактировать

Глядя на ваш репозиторий, я вижу, что вы используете redirectRoute() с опцией навигации: true. Это приводит к обновлению тела без фактического обновления документа браузера, поэтому внешние библиотеки должны быть вынуждены повторно инициализировать связанные элементы. Чтобы добиться этого, мы можем переместить код, который инициализирует входные данные type-tel, в прослушиватель событий для события livewire:navigated:

document.addEventListener('livewire:navigated', () => {

    const elementsTypePhone = document.querySelectorAll("input[type=tel]");

    elementsTypePhone.forEach(element => {

        // console.info ("element: ", element);

        const iti = intlTelInput(element, {

            initialCountry: "bh",
            strictMode: true,
            separateDialCode: true,
            onlyCountries: ['bh', 'sa', 'ae', 'qa', 'kw', 'om', 'us', 'gb'],
            utilsScript: "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js",
        });
    });
});

Спасибо за добрый ответ. Конечно, это JS в моем app.js.

import intlTelInput from 'intl-tel-input';
document.addEventListener('livewire:init', () => {
    const elementsWithPhoneId = document.querySelectorAll('input[type=tel]');
    elementsWithPhoneId.forEach(element => {

        const iti = intlTelInput(element, {
            initialCountry: "bh",
            strictMode: true,
            separateDialCode: true,
            onlyCountries: ['bh', 'sa', 'ae', 'qa', 'kw', 'om', 'us', 'gb'],
            utilsScript: "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js",
        });
    });
});

Это мой компонент в шаблоне лезвия

<div class = "w-full py-2 lg:w-1/2 md:w-1/2 px-2 grid grid-cols-1" >
    <label for = "inputC1P1" class = "w-full font-medium py-1">Primary Phone : <span class = "text-red-600"> *</span></label>
    <div wire:ignore>
        <input
            type = "tel"
            id = "inputC1P1"
            class = "@error('C1PrimaryContact') bg-red-200 @enderror form-input border border-1 rounded-md w-full my-1 border-gray-300 shadow-md hover:transition-all"
            placeholder = "3344 5566"
            wire:model.blur = "C1PrimaryContact"
            required
        />
    </div>
    <div>
        @error('C1PrimaryContact') <p class = "text-red-600 font-light text-xs antialiased italic">{{ $message }}</p>  @enderror
    </div>
</div>