Multiple tel input instance bug fix

victorybiz · Aug 10, 2021 · 21f7757 · 21f7757
1 parent 8122f52
commit 21f7757
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 33 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -13,6 +13,7 @@
 <span wire:ignore>
   <input
     type="tel"
+    class="iti--laravel-tel-input {{ $attributes->get('class') }}"
     data-phone-input-id="{{ $id }}"
     data-phone-input-name="{{ $name }}"
     data-phone-input="#{{ $id }}"
@@ -25,7 +26,6 @@
     @if ($attributes->has('placeholder'))
       placeholder="{{ $attributes->get('placeholder') }}"
     @endif
-    class="phone-input {{ $attributes->get('class') }}"
     @if ($attributes->has('required'))
       required
     @endif