Fix tel-input not rendering in Livewire after component update, refresh or change in DOM content.

Author: victorybiz

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

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. |
 
 
+<a name="troubleshooting"></a>
+
+## 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');
+          }
+      }
+      //...
+  }
+  ```
+
 <a name="testing"></a>
 
 ## Testing

public/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();
+      });
+    }
+  });
   // 
 })();