don't register event listeners on clone - livewire/livewire#1995

dist/alpine.js

@@ -1509,9 +1509,11 @@
         initReturnedCallback = this.evaluateReturnExpression(this.$el, initExpression);
         this.pauseReactivity = false;
       } // Register all our listeners and set all our attribute bindings.
+      // If we're cloning a component, the third parameter ensures no duplicate
+      // event listeners are registered (the mutation observer will take care of them)
 
 
-      this.initializeElements(this.$el); // Use mutation observer to detect new elements being added within this component at run-time.
+      this.initializeElements(this.$el, () => {}, componentForClone ? false : true); // Use mutation observer to detect new elements being added within this component at run-time.
       // Alpine's just so darn flexible amirite?
 
       this.listenForNewElementsToInitialize();
@@ -1600,13 +1602,13 @@
       });
     }
 
-    initializeElements(rootEl, extraVars = () => {}) {
+    initializeElements(rootEl, extraVars = () => {}, shouldRegisterListeners = true) {
       this.walkAndSkipNestedComponents(rootEl, el => {
         // Don't touch spawns from for loop
         if (el.__x_for_key !== undefined) return false; // Don't touch spawns from if directives
 
         if (el.__x_inserted_me !== undefined) return false;
-        this.initializeElement(el, extraVars);
+        this.initializeElement(el, extraVars, shouldRegisterListeners);
       }, el => {
         el.__x = new Component(el);
       });
@@ -1614,14 +1616,14 @@
       this.executeAndClearNextTickStack(rootEl);
     }
 
-    initializeElement(el, extraVars) {
+    initializeElement(el, extraVars, shouldRegisterListeners = true) {
       // To support class attribute merging, we have to know what the element's
       // original class attribute looked like for reference.
       if (el.hasAttribute('class') && getXAttrs(el, this).length > 0) {
         el.__x_original_classes = convertClassStringToArray(el.getAttribute('class'));
       }
 
-      this.registerListeners(el, extraVars);
+      shouldRegisterListeners && this.registerListeners(el, extraVars);
       this.resolveBoundAttributes(el, true, extraVars);
     }
 

src/component.js

@@ -94,7 +94,9 @@ export default class Component {
         }
 
         // Register all our listeners and set all our attribute bindings.
-        this.initializeElements(this.$el)
+        // If we're cloning a component, the third parameter ensures no duplicate
+        // event listeners are registered (the mutation observer will take care of them)
+        this.initializeElements(this.$el, () => {}, componentForClone ? false : true)
 
         // Use mutation observer to detect new elements being added within this component at run-time.
         // Alpine's just so darn flexible amirite?
@@ -195,7 +197,7 @@ export default class Component {
         })
     }
 
-    initializeElements(rootEl, extraVars = () => {}) {
+    initializeElements(rootEl, extraVars = () => {}, shouldRegisterListeners = true) {
         this.walkAndSkipNestedComponents(rootEl, el => {
             // Don't touch spawns from for loop
             if (el.__x_for_key !== undefined) return false
@@ -203,7 +205,7 @@ export default class Component {
             // Don't touch spawns from if directives
             if (el.__x_inserted_me !== undefined) return false
 
-            this.initializeElement(el, extraVars)
+            this.initializeElement(el, extraVars, shouldRegisterListeners)
         }, el => {
             el.__x = new Component(el)
         })
@@ -213,14 +215,14 @@ export default class Component {
         this.executeAndClearNextTickStack(rootEl)
     }
 
-    initializeElement(el, extraVars) {
+    initializeElement(el, extraVars, shouldRegisterListeners = true) {
         // To support class attribute merging, we have to know what the element's
         // original class attribute looked like for reference.
         if (el.hasAttribute('class') && getXAttrs(el, this).length > 0) {
             el.__x_original_classes = convertClassStringToArray(el.getAttribute('class'))
         }
 
-        this.registerListeners(el, extraVars)
+        shouldRegisterListeners && this.registerListeners(el, extraVars)
         this.resolveBoundAttributes(el, true, extraVars)
     }