Fix event duplication when using wire:navigate

wire-elements · Dec 8, 2023 · 899b05e · 899b05e
1 parent d6dac3a
commit 899b05e
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 8 deletions.
diff --git a/composer.json b/composer.json
@@ -30,7 +30,7 @@
   },
   "require": {
     "php": "^8.1",
-    "livewire/livewire": "^3.0",
+    "livewire/livewire": "^3.2.3",
     "spatie/laravel-package-tools": "^1.9"
   },
   "autoload": {

diff --git a/public/modal.js b/public/modal.js
diff --git a/resources/js/modal.js b/resources/js/modal.js
@@ -5,6 +5,7 @@ window.LivewireUIModal = () => {
         activeComponent: false,
         componentHistory: [],
         modalWidth: null ,
+        listeners: [],
         getActiveComponentModalAttribute(key) {
             if (this.$wire.get('components')[this.activeComponent] !== undefined) {
                 return this.$wire.get('components')[this.activeComponent]['modalAttributes'][key];
@@ -140,12 +141,21 @@ window.LivewireUIModal = () => {
         init() {
             this.modalWidth = this.getActiveComponentModalAttribute('maxWidthClass');
 
-            Livewire.on('closeModal', (data) => {
-                this.closeModal(data?.force ?? false, data?.skipPreviousModals ?? 0, data?.destroySkipped ?? false);
-            });
-
-            Livewire.on('activeModalComponentChanged', ({id}) => {
-                this.setActiveModalComponent(id);
+            this.listeners.push(
+                Livewire.on('closeModal', (data) => {
+                    this.closeModal(data?.force ?? false, data?.skipPreviousModals ?? 0, data?.destroySkipped ?? false);
+                })
+            );
+
+            this.listeners.push(
+                Livewire.on('activeModalComponentChanged', ({id}) => {
+                    this.setActiveModalComponent(id);
+                })
+            );
+        },
+        destroy() {
+            this.listeners.forEach((listener) => {
+                listener();
             });
         }
     };