diff --git a/CHANGELOG.md b/CHANGELOG.md index aac32ee..4a6be2f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,15 +2,18 @@ All notable changes to `laravel-tel-input` will be documented in this file -## v1.1.0 - 2021-08-08 +## v1.1.1 - 2021-08-10 +- Multiple tel input instance bug fix. + +## v1.1.0 - 2021-08-09 - First stable release. -## v1.0.4 - 2021-08-08 +## v1.0.4 - 2021-08-09 - Bug fix. -## v1.0.3 - 2021-08-08 +## v1.0.3 - 2021-08-09 - Bug fix. diff --git a/composer.json b/composer.json index e1b634a..c93d06e 100644 --- a/composer.json +++ b/composer.json @@ -4,6 +4,7 @@ "keywords": [ "victorybiz", "laravel-tel-input", + "livewire-tel-input", "tel-input", "intl-tel-input", "telephone-input", diff --git a/public/js/laravel-tel-input.js b/public/js/laravel-tel-input.js index 75ac92d..8e5e65f 100644 --- a/public/js/laravel-tel-input.js +++ b/public/js/laravel-tel-input.js @@ -82,11 +82,11 @@ if (typeof window.intlTelInput !== 'function') { function initTelInput(telInput) { var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; - // allow each input to have its own initialCountry and geoIpLookup - window.intlTelInputGlobals.autoCountry = null; - window.intlTelInputGlobals.startedLoadingAutoCountry = false; // tel input country cookie + // tel input country cookie + var IntlTelInputSelectedCountryCookie = "IntlTelInputSelectedCountry_".concat(telInput.dataset.phoneInputId); // allow each input to have its own initialCountry and geoIpLookup - var IntlTelInputSelectedCountryCookie = "IntlTelInputSelectedCountry_".concat(telInput.dataset.phoneInputId); // fix autofill bugs on page refresh in Firefox + window.intlTelInputGlobals.autoCountry = getCookie(IntlTelInputSelectedCountryCookie) || window.intlTelInputGlobals.autoCountry; // window.intlTelInputGlobals.startedLoadingAutoCountry = false; + // fix autofill bugs on page refresh in Firefox var form = telInput.closest('form'); @@ -147,7 +147,7 @@ if (typeof window.intlTelInput !== 'function') { } // init the tel input - var itiPhone = window.intlTelInput(telInput, options); + var itiPhone = window.intlTelInput(telInput, options); // countrychange event function var countryChangeEventFunc = function countryChangeEventFunc() { var countryData = itiPhone.getSelectedCountryData(); @@ -183,9 +183,10 @@ if (typeof window.intlTelInput !== 'function') { telInput.dispatchEvent(new KeyboardEvent('change')); } - }; + }; // countrychange event function - var telInputEventFunc = function telInputEventFunc() { + + var telInputChangeEventFunc = function telInputChangeEventFunc() { // phone input data if (this.dataset.phoneInput) { var _phoneInput$value, _itiPhone$getNumber; @@ -243,10 +244,11 @@ if (typeof window.intlTelInput !== 'function') { } } } - }; + }; // Listen the tel inputs events + - telInput.addEventListener('change', telInputEventFunc); - telInput.addEventListener('countrychange', countryChangeEventFunc); // sync phone number with tel input + telInput.addEventListener('countrychange', countryChangeEventFunc); + telInput.addEventListener('change', telInputChangeEventFunc); // listen and sync phone number with tel input if any if (telInput.dataset.phoneInput) { var phoneInput = document.querySelector(telInput.dataset.phoneInput); @@ -270,7 +272,7 @@ if (typeof window.intlTelInput !== 'function') { } }); } - } // sync phone country with tel input + } // listen and sync phone country with tel input if any if (telInput.dataset.phoneCountryInput) { @@ -283,13 +285,16 @@ if (typeof window.intlTelInput !== 'function') { itiPhone.setCountry((_this$value2 = this.value) === null || _this$value2 === void 0 ? void 0 : _this$value2.trim()); }); } - } - } // init all tel inputs + } // After each intlTelInput instance has been created, fix issues with pre-filled values by dispatching change event on the country dropdown + + + telInput.dispatchEvent(new KeyboardEvent('countrychange')); + } // Call function to initialize an instance of int tel input on all elements with .iti--laravel-tel-input attribute var telInputconfig = laravelTelInputConfig; // laravelTelInputConfig will be defined in blade - var telInputs = document.querySelectorAll(".phone-input"); + var telInputs = document.querySelectorAll(".iti--laravel-tel-input"); for (var i = 0; i < telInputs.length; i++) { initTelInput(telInputs[i], telInputconfig); diff --git a/resources/js/laravel-tel-input.js b/resources/js/laravel-tel-input.js index ec908d5..0b8f211 100644 --- a/resources/js/laravel-tel-input.js +++ b/resources/js/laravel-tel-input.js @@ -60,13 +60,13 @@ // init a tell input function initTelInput(telInput, options = {}) { - // allow each input to have its own initialCountry and geoIpLookup - window.intlTelInputGlobals.autoCountry = null; - window.intlTelInputGlobals.startedLoadingAutoCountry = false; - // tel input country cookie const IntlTelInputSelectedCountryCookie = `IntlTelInputSelectedCountry_${telInput.dataset.phoneInputId}`; + // allow each input to have its own initialCountry and geoIpLookup + window.intlTelInputGlobals.autoCountry = getCookie(IntlTelInputSelectedCountryCookie) || window.intlTelInputGlobals.autoCountry; + // window.intlTelInputGlobals.startedLoadingAutoCountry = false; + // fix autofill bugs on page refresh in Firefox let form = telInput.closest('form'); if (form) { @@ -80,7 +80,7 @@ } else if (options.geoIpLookup === 'ipinfo') { options.geoIpLookup = function(success, failure) { let country = getCookie(IntlTelInputSelectedCountryCookie); - if (country) { + if (country) { success(country); } else { fetch('https://ipinfo.io/json') @@ -121,12 +121,14 @@ } delete options.customPlaceholder; // unset if undefined function } - // init the tel input const itiPhone = window.intlTelInput(telInput, options); + - const countryChangeEventFunc = function () { + // countrychange event function + const countryChangeEventFunc = function () { + let countryData = itiPhone.getSelectedCountryData(); if (countryData.iso2) { setCookie(IntlTelInputSelectedCountryCookie, countryData.iso2?.toUpperCase()); @@ -150,11 +152,12 @@ } } // once country change trigger change event on the telephone input - telInput.dispatchEvent(new KeyboardEvent('change')); - } + telInput.dispatchEvent(new KeyboardEvent('change')); + } } - const telInputEventFunc = function () { + // countrychange event function + const telInputChangeEventFunc = function () { // phone input data if (this.dataset.phoneInput) { const phoneInput = document.querySelector(this.dataset.phoneInput); @@ -204,9 +207,12 @@ } } } - telInput.addEventListener('change', telInputEventFunc); + + // Listen the tel inputs events telInput.addEventListener('countrychange', countryChangeEventFunc); - // sync phone number with tel input + telInput.addEventListener('change', telInputChangeEventFunc); + + // listen and sync phone number with tel input if any if (telInput.dataset.phoneInput) { const phoneInput = document.querySelector(telInput.dataset.phoneInput); if (phoneInput) { @@ -222,7 +228,7 @@ }); } } - // sync phone country with tel input + // listen and sync phone country with tel input if any if (telInput.dataset.phoneCountryInput) { const phoneCountryInput = document.querySelector(telInput.dataset.phoneCountryInput); if (phoneCountryInput) { @@ -231,11 +237,14 @@ }); } } + + // After each intlTelInput instance has been created, fix issues with pre-filled values by dispatching change event on the country dropdown + telInput.dispatchEvent(new KeyboardEvent('countrychange')); } - // init all tel inputs + // Call function to initialize an instance of int tel input on all elements with .iti--laravel-tel-input attribute const telInputconfig = laravelTelInputConfig; // laravelTelInputConfig will be defined in blade - const telInputs = document.querySelectorAll(".phone-input"); + const telInputs = document.querySelectorAll(".iti--laravel-tel-input"); for (let i = 0; i < telInputs.length; i++) { initTelInput(telInputs[i], telInputconfig); } diff --git a/resources/views/components/laravel-tel-input.blade.php b/resources/views/components/laravel-tel-input.blade.php index a9f95ff..52cbfe7 100644 --- a/resources/views/components/laravel-tel-input.blade.php +++ b/resources/views/components/laravel-tel-input.blade.php @@ -13,6 +13,7 @@ has('placeholder')) placeholder="{{ $attributes->get('placeholder') }}" @endif - class="phone-input {{ $attributes->get('class') }}" @if ($attributes->has('required')) required @endif