diff --git a/CHANGELOG.md b/CHANGELOG.md
index 377be36..8e9ca5e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,10 @@
All notable changes to `laravel-tel-input` will be documented in this file
+## v1.1.5 - 2021-09-28
+
+- Fix tel-input not rendering in Livewire after component update, refresh or change in DOM content.
+-
## v1.1.4 - 2021-09-27
- Fix utilsScript relative path bug
diff --git a/README.md b/README.md
index 5ac3af2..6528687 100644
--- a/README.md
+++ b/README.md
@@ -33,6 +33,7 @@ Laravel Telephone Input component for Blade and Livewire based on the [intl-tel-
- [Event Listener](#event-listener)
- [Props / Attributes](#props--attributes)
- [Events](#events)
+ - [Troubleshooting](#troubleshooting)
- [Testing](#testing)
- [Changelog](#changelog)
- [Contributing](#contributing)
@@ -225,6 +226,31 @@ input.addEventListener('telchange', function(e) {
| **telchange** | `telchange` | Emitted when tel input value change. See [example](#event-listener) above. |
+
+
+## Troubleshooting
+
+- ### tel-input not rendering in Livewire after component update, refresh or change in DOM content.
+ The most common issues encountered by Livewire users has to do with Livewire's DOM diffing/patching system. This is the system that selectively updates elements that have been changed, added, or removed after every component update.
+ For the most part, this system is reliable, but there are certain cases where Livewire is unable to properly track changes. When this happens, hopefully, a helpful error will be thrown and you can debug with the following guide.
+ If a tel-input fails to render after component update like opening popup/modal with a `tel-input` or switch to tab section with a form containing a `tel-input`, to fix this, dispatch a `telDOMChanged` browser event in the action that triggers/opens the popup or form tab.
+ ```php
+ class ContactPage extends Component
+ {
+ public $showQuickContactForm = false;
+
+ public function toggleQuickContactForm()
+ {
+ $this->showQuickContactForm = !$this->showQuickContactForm;
+
+ if ($this->showQuickContactForm) {
+ $this->dispatchBrowserEvent('telDOMChanged');
+ }
+ }
+ //...
+ }
+ ```
+
## Testing
diff --git a/public/js/laravel-tel-input.js b/public/js/laravel-tel-input.js
index c63b57e..ae5bf58 100644
--- a/public/js/laravel-tel-input.js
+++ b/public/js/laravel-tel-input.js
@@ -1 +1 @@
-(()=>{var e,t={166:()=>{if("function"!=typeof window.intlTelInput)throw new TypeError("Laravel-Tel-Input: requires International Telephone Input (https://github.com/jackocnr/intl-tel-input). Please install with NPM or include the CDN.");!function(){"use strict";function e(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:null,a="".concat(e,"=").concat(t,";");if(n){var r=new Date;r.setTime(r.getTime()+24*n*60*60*1e3),a+="expires=".concat(r.toUTCString(),";")}o&&(a+="path=".concat(o,";")),i&&(a+="domain=".concat(i,";")),document.cookie=a}function t(e){for(var t=e+"=",n=document.cookie.split(";"),o=0;o1&&void 0!==arguments[1]?arguments[1]:{},i="IntlTelInputSelectedCountry_".concat(n.dataset.phoneInputId);window.intlTelInputGlobals.autoCountry=t(i)||window.intlTelInputGlobals.autoCountry;var a=n.closest("form");if(a&&a.setAttribute("autocomplete","off"),null==o.geoIpLookup)delete o.geoIpLookup;else if("ipinfo"===o.geoIpLookup)o.geoIpLookup=function(n,o){var a=t(i);a?n(a):fetch("https://ipinfo.io/json").then((function(e){return e.json()})).then((function(e){return e})).then((function(t){var o,a=null===(o=t.country)||void 0===o?void 0:o.toUpperCase();n(a),e(i,a)})).catch((function(e){return n("US")}))};else if("function"==typeof window[o.geoIpLookup])o.geoIpLookup=window[o.geoIpLookup];else{if("function"!=typeof o.geoIpLookup)throw new TypeError("Laravel-Tel-Input: Undefined function '".concat(o.geoIpLookup,"' specified in tel-input.options.geoIpLookup."));delete o.geoIpLookup}if(null==o.customPlaceholder)delete o.customPlaceholder;else if("function"==typeof window[o.customPlaceholder])o.customPlaceholder=window[o.customPlaceholder];else{if("function"!=typeof o.customPlaceholder)throw new TypeError("Laravel-Tel-Input: Undefined function '".concat(o.customPlaceholder,"' specified in tel-input.options.customPlaceholder."));delete o.customPlaceholder}o.utilsScript&&(o.utilsScript="/"==o.utilsScript.charAt(0)?o.utilsScript:"/"+o.utilsScript);var r=window.intlTelInput(n,o),u=function(){var t=r.getSelectedCountryData();if(t.iso2){var o;if(e(i,null===(o=t.iso2)||void 0===o?void 0:o.toUpperCase()),this.dataset.phoneCountryInput&&t.iso2){var a=document.querySelector(this.dataset.phoneCountryInput);if(a){var u,l,d=null===(u=a.value)||void 0===u?void 0:u.trim();a.value=null===(l=t.iso2)||void 0===l?void 0:l.toUpperCase(),a.value===d&&""==a.value||a.dispatchEvent(new KeyboardEvent("change"))}}if(this.dataset.phoneDialCodeInput&&t.dialCode){var c=document.querySelector(this.dataset.phoneDialCodeInput);if(c){var v=c.value;c.value=t.dialCode,c.value===v&&""==c.value||c.dispatchEvent(new KeyboardEvent("change"))}}n.dispatchEvent(new KeyboardEvent("change"))}},l=function(){if(this.dataset.phoneInput){var e=document.querySelector(this.dataset.phoneInput);if(e){var t,n,o,i,a=null===(t=e.value)||void 0===t?void 0:t.trim();if(""!=a&&"+"!=a.charAt(0)&&"0"!=a.charAt(0)&&null===r.isValidNumber()&&(a="+".concat(a),e.value=a),""!=(null===(n=r.getNumber())||void 0===n?void 0:n.trim())?r.isValidNumber()?e.value=r.getNumber():e.value="":""!=a&&null===r.isValidNumber()&&(r.setNumber(a),e.value=r.getNumber()),e.value===a||""==e.value||!0!==r.isValidNumber()&&null!==r.isValidNumber()){if(!1===r.isValidNumber())e.dispatchEvent(new KeyboardEvent("change")),e.dispatchEvent(new CustomEvent("telchange",{detail:{valid:!1,validNumber:e.value,number:r.getNumber(),country:null===(o=r.getSelectedCountryData().iso2)||void 0===o?void 0:o.toUpperCase(),countryName:r.getSelectedCountryData().name,dialCode:r.getSelectedCountryData().dialCode}}))}else e.dispatchEvent(new KeyboardEvent("change")),e.dispatchEvent(new CustomEvent("telchange",{detail:{valid:!0,validNumber:e.value,number:r.getNumber(),country:null===(i=r.getSelectedCountryData().iso2)||void 0===i?void 0:i.toUpperCase(),countryName:r.getSelectedCountryData().name,dialCode:r.getSelectedCountryData().dialCode}}))}}};if(n.addEventListener("countrychange",u),n.addEventListener("change",l),n.dataset.phoneInput){var d=document.querySelector(n.dataset.phoneInput);if(d){var c,v=null===(c=d.value)||void 0===c?void 0:c.trim();""!=v&&"+"!=v.charAt(0)&&"0"!=v.charAt(0)&&(v="+".concat(v)),d.addEventListener("change",(function(){var e,t=null===(e=this.value)||void 0===e?void 0:e.trim();t!=v&&""!=t&&r.setNumber(t)}))}}if(n.dataset.phoneCountryInput){var p=document.querySelector(n.dataset.phoneCountryInput);p&&p.addEventListener("change",(function(){var e;r.setCountry(null===(e=this.value)||void 0===e?void 0:e.trim())}))}n.dispatchEvent(new KeyboardEvent("countrychange")),document.addEventListener("turbolinks:load",(function(){n&&n.dispatchEvent(new KeyboardEvent("countrychange"))})),document.addEventListener("turbo:load",(function(){n&&n.dispatchEvent(new KeyboardEvent("countrychange"))}))}function o(){var e=laravelTelInputConfig,t=document.querySelectorAll(".iti--laravel-tel-input");if(t.length>0)for(var o=0;o{}},n={};function o(e){var i=n[e];if(void 0!==i)return i.exports;var a=n[e]={exports:{}};return t[e](a,a.exports,o),a.exports}o.m=t,e=[],o.O=(t,n,i,a)=>{if(!n){var r=1/0;for(c=0;c=a)&&Object.keys(o.O).every((e=>o.O[e](n[l])))?n.splice(l--,1):(u=!1,a0&&e[c-1][2]>a;c--)e[c]=e[c-1];e[c]=[n,i,a]},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e={237:0,960:0};o.O.j=t=>0===e[t];var t=(t,n)=>{var i,a,[r,u,l]=n,d=0;for(i in u)o.o(u,i)&&(o.m[i]=u[i]);if(l)var c=l(o);for(t&&t(n);do(166)));var i=o.O(void 0,[960],(()=>o(76)));i=o.O(i)})();
\ No newline at end of file
+(()=>{var e,t={166:()=>{if("function"!=typeof window.intlTelInput)throw new TypeError("Laravel-Tel-Input: requires International Telephone Input (https://github.com/jackocnr/intl-tel-input). Please install with NPM or include the CDN.");!function(){"use strict";function e(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:null,a="".concat(e,"=").concat(t,";");if(n){var r=new Date;r.setTime(r.getTime()+24*n*60*60*1e3),a+="expires=".concat(r.toUTCString(),";")}o&&(a+="path=".concat(o,";")),i&&(a+="domain=".concat(i,";")),document.cookie=a}function t(e){for(var t=e+"=",n=document.cookie.split(";"),o=0;o1&&void 0!==arguments[1]?arguments[1]:{},i="IntlTelInputSelectedCountry_".concat(n.dataset.phoneInputId);window.intlTelInputGlobals.autoCountry=t(i)||window.intlTelInputGlobals.autoCountry;var a=n.closest("form");if(a&&a.setAttribute("autocomplete","off"),null==o.geoIpLookup)delete o.geoIpLookup;else if("ipinfo"===o.geoIpLookup)o.geoIpLookup=function(n,o){var a=t(i);a?n(a):fetch("https://ipinfo.io/json").then((function(e){return e.json()})).then((function(e){return e})).then((function(t){var o,a=null===(o=t.country)||void 0===o?void 0:o.toUpperCase();n(a),e(i,a)})).catch((function(e){return n("US")}))};else if("function"==typeof window[o.geoIpLookup])o.geoIpLookup=window[o.geoIpLookup];else{if("function"!=typeof o.geoIpLookup)throw new TypeError("Laravel-Tel-Input: Undefined function '".concat(o.geoIpLookup,"' specified in tel-input.options.geoIpLookup."));delete o.geoIpLookup}if(null==o.customPlaceholder)delete o.customPlaceholder;else if("function"==typeof window[o.customPlaceholder])o.customPlaceholder=window[o.customPlaceholder];else{if("function"!=typeof o.customPlaceholder)throw new TypeError("Laravel-Tel-Input: Undefined function '".concat(o.customPlaceholder,"' specified in tel-input.options.customPlaceholder."));delete o.customPlaceholder}o.utilsScript&&(o.utilsScript="/"==o.utilsScript.charAt(0)?o.utilsScript:"/"+o.utilsScript);var r=window.intlTelInput(n,o),u=function(){var t=r.getSelectedCountryData();if(t.iso2){var o;if(e(i,null===(o=t.iso2)||void 0===o?void 0:o.toUpperCase()),this.dataset.phoneCountryInput&&t.iso2){var a=document.querySelector(this.dataset.phoneCountryInput);if(a){var u,l,d=null===(u=a.value)||void 0===u?void 0:u.trim();a.value=null===(l=t.iso2)||void 0===l?void 0:l.toUpperCase(),a.value===d&&""==a.value||a.dispatchEvent(new KeyboardEvent("change"))}}if(this.dataset.phoneDialCodeInput&&t.dialCode){var c=document.querySelector(this.dataset.phoneDialCodeInput);if(c){var v=c.value;c.value=t.dialCode,c.value===v&&""==c.value||c.dispatchEvent(new KeyboardEvent("change"))}}n.dispatchEvent(new KeyboardEvent("change"))}},l=function(){if(this.dataset.phoneInput){var e=document.querySelector(this.dataset.phoneInput);if(e){var t,n,o,i,a=null===(t=e.value)||void 0===t?void 0:t.trim();if(""!=a&&"+"!=a.charAt(0)&&"0"!=a.charAt(0)&&null===r.isValidNumber()&&(a="+".concat(a),e.value=a),""!=(null===(n=r.getNumber())||void 0===n?void 0:n.trim())?r.isValidNumber()?e.value=r.getNumber():e.value="":""!=a&&null===r.isValidNumber()&&(r.setNumber(a),e.value=r.getNumber()),e.value===a||""==e.value||!0!==r.isValidNumber()&&null!==r.isValidNumber()){if(!1===r.isValidNumber())e.dispatchEvent(new KeyboardEvent("change")),e.dispatchEvent(new CustomEvent("telchange",{detail:{valid:!1,validNumber:e.value,number:r.getNumber(),country:null===(o=r.getSelectedCountryData().iso2)||void 0===o?void 0:o.toUpperCase(),countryName:r.getSelectedCountryData().name,dialCode:r.getSelectedCountryData().dialCode}}))}else e.dispatchEvent(new KeyboardEvent("change")),e.dispatchEvent(new CustomEvent("telchange",{detail:{valid:!0,validNumber:e.value,number:r.getNumber(),country:null===(i=r.getSelectedCountryData().iso2)||void 0===i?void 0:i.toUpperCase(),countryName:r.getSelectedCountryData().name,dialCode:r.getSelectedCountryData().dialCode}}))}}};if(n.addEventListener("countrychange",u),n.addEventListener("change",l),n.dataset.phoneInput){var d=document.querySelector(n.dataset.phoneInput);if(d){var c,v=null===(c=d.value)||void 0===c?void 0:c.trim();""!=v&&"+"!=v.charAt(0)&&"0"!=v.charAt(0)&&(v="+".concat(v)),d.addEventListener("change",(function(){var e,t=null===(e=this.value)||void 0===e?void 0:e.trim();t!=v&&""!=t&&r.setNumber(t)}))}}if(n.dataset.phoneCountryInput){var p=document.querySelector(n.dataset.phoneCountryInput);p&&p.addEventListener("change",(function(){var e;r.setCountry(null===(e=this.value)||void 0===e?void 0:e.trim())}))}n.dispatchEvent(new KeyboardEvent("countrychange")),document.addEventListener("turbolinks:load",(function(){n&&n.dispatchEvent(new KeyboardEvent("countrychange"))})),document.addEventListener("turbo:load",(function(){n&&n.dispatchEvent(new KeyboardEvent("countrychange"))}))}function o(){var e=laravelTelInputConfig,t=document.querySelectorAll(".iti--laravel-tel-input");if(t.length>0)for(var o=0;o{}},n={};function o(e){var i=n[e];if(void 0!==i)return i.exports;var a=n[e]={exports:{}};return t[e](a,a.exports,o),a.exports}o.m=t,e=[],o.O=(t,n,i,a)=>{if(!n){var r=1/0;for(c=0;c=a)&&Object.keys(o.O).every((e=>o.O[e](n[l])))?n.splice(l--,1):(u=!1,a0&&e[c-1][2]>a;c--)e[c]=e[c-1];e[c]=[n,i,a]},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e={237:0,960:0};o.O.j=t=>0===e[t];var t=(t,n)=>{var i,a,[r,u,l]=n,d=0;for(i in u)o.o(u,i)&&(o.m[i]=u[i]);if(l)var c=l(o);for(t&&t(n);do(166)));var i=o.O(void 0,[960],(()=>o(76)));i=o.O(i)})();
\ No newline at end of file
diff --git a/resources/js/laravel-tel-input.js b/resources/js/laravel-tel-input.js
index 0fa480b..c7f715e 100644
--- a/resources/js/laravel-tel-input.js
+++ b/resources/js/laravel-tel-input.js
@@ -278,16 +278,21 @@
}
}
- // Listen to the document ready event and render the tel inputs
+ // Listen to the document events and re-render the tel inputs
document.addEventListener("DOMContentLoaded", function() {
renderTelInput();
- });
-
- // Livewire hook
- if (window.Livewire) {
- window.Livewire.hook('component.initialized', component => {
+
+ // user dispatched browser events to re-render the tel inputs
+ document.addEventListener("telDOMChanged", function() {
renderTelInput();
});
- }
+
+ // Livewire event hook
+ if (window.Livewire) {
+ window.Livewire.hook('component.initialized', component => {
+ renderTelInput();
+ });
+ }
+ });
//
})();
\ No newline at end of file