Fix tel-input not rendering in Livewire after component update, refre…

…sh or change in DOM content.
victorybiz · Sep 27, 2021 · af502e7 · af502e7
1 parent b581029
commit af502e7
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 8 deletions.
diff --git 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
@@ -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

diff --git a/public/js/laravel-tel-input.js b/public/js/laravel-tel-input.js
diff --git 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();
  });
  }
  });
  // 
 })();