Added support for Livewire 3

victorybiz · Sep 24, 2023 · 5d579a7 · 5d579a7
1 parent fa13596
commit 5d579a7
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -28,7 +28,8 @@ Laravel Telephone Input component for Blade and Livewire based on the [intl-tel-
   - [Usage](#usage)
         - [Basic usage](#basic-usage)
         - [Add hidden phone-country-input](#add-hidden-phone-country-input)
-        - [Usage with Livewire](#usage-with-livewire)
+        - [Usage with Livewire 2](#usage-with-livewire-2)
+        - [Usage with Livewire 3](#usage-with-livewire-3)
         - [Sync tel-input wih a country dropdown](#sync-tel-input-wih-a-country-dropdown)
         - [Event Listener](#event-listener)
   - [Props / Attributes](#props--attributes)
@@ -151,7 +152,7 @@ Please refer to the [intl-tel-input readme](https://github.com/jackocnr/intl-tel
 />
 <input type="hidden" id="phone_country" name="phone_country">
 ```
-##### Usage with Livewire
+##### Usage with Livewire 2
 ```html
 <x-tel-input
   wire:model="phone"
@@ -161,6 +162,17 @@ Please refer to the [intl-tel-input readme](https://github.com/jackocnr/intl-tel
 /> 
 <input wire:model="phone_country" type="hidden" id="phone_country" name="phone_country">
 ```
+##### Usage with Livewire 3
+```html
+<x-tel-input
+  wire:model.live="phone"
+  value="{{ $phone }}"
+  id="phone"
+  name="phone"
+  class="form-input"
+/> 
+<input wire:model="phone_country" type="hidden" id="phone_country" name="phone_country">
+```
 ##### Sync tel-input wih a country dropdown
 ```html
 <div class="form-item">
@@ -246,7 +258,8 @@ input.addEventListener('telchange', function(e) {
           $this->showQuickContactForm = !$this->showQuickContactForm;
 
           if ($this->showQuickContactForm) {
-              $this->dispatchBrowserEvent('telDOMChanged');
+              $this->dispatchBrowserEvent('telDOMChanged'); // in Livewire 2
+              $this->dispatch('telDOMChanged'); // in Livewire 3
           }
       }
       //...

diff --git a/resources/js/laravel-tel-input.js b/resources/js/laravel-tel-input.js
@@ -157,7 +157,7 @@
       }
     }
 
-    // countrychange event function
+    // tel input change event function
     const telInputChangeEventFunc = function () {
       // phone input data
       if (this.dataset.phoneInput) {
@@ -182,6 +182,7 @@
           }
           if (phoneInput.value !== oldValue && phoneInput.value != '' && (itiPhone.isValidNumber() === true || itiPhone.isValidNumber() === null)) {
             phoneInput.dispatchEvent(new KeyboardEvent('change'));
+            phoneInput.dispatchEvent(new KeyboardEvent('input'));
             phoneInput.dispatchEvent(new CustomEvent('telchange', {
               detail: {
                 valid: true,
@@ -195,6 +196,7 @@
           } else {
             if (itiPhone.isValidNumber() === false) {
               phoneInput.dispatchEvent(new KeyboardEvent('change'));  
+              phoneInput.dispatchEvent(new KeyboardEvent('input'));  
               phoneInput.dispatchEvent(new CustomEvent('telchange', {
                 detail: {
                   valid: false,