Unbind event handlers upon destruction of the form widget (#5112)

* Unbind event handlers upon destruction of the form widget

modules/backend/widgets/form/assets/js/october.form.js

@@ -39,9 +39,15 @@
 
         this.$el.on('oc.triggerOn.afterUpdate', this.proxy(this.toggleEmptyTabs))
         this.$el.one('dispose-control', this.proxy(this.dispose))
+        this.$form.closest('.modal').on('hidden.oc.popup', this.proxy(this.dispose))
     }
 
     FormWidget.prototype.dispose = function() {
+        this.unbindDependants()
+        this.unbindCheckboxList()
+        this.unbindLazyTabs()
+        this.unbindCollapsibleSections()
+
         this.$el.off('dispose-control', this.proxy(this.dispose))
         this.$el.removeData('oc.formwidget')
 
@@ -75,6 +81,14 @@
 
     }
 
+    /*
+     * Unbind checkboxlist handlers
+     */
+    FormWidget.prototype.unbindCheckboxList = function() {
+        this.$el.off('click', '[data-field-checkboxlist-all]')
+        this.$el.off('click', '[data-field-checkboxlist-none]')
+    }
+
     /*
      * Get all fields elements that belong to this form, nested form
      * fields are removed from this collection.
@@ -94,13 +108,40 @@
      * Bind dependant fields
      */
     FormWidget.prototype.bindDependants = function() {
+        var self = this,
+            fieldMap = this._getDependants()
 
+        /*
+         * When a field is updated, refresh its dependents
+         */
+        $.each(fieldMap, function(fieldName, toRefresh) {
+            $(document).on('change.oc.formwidget',
+                '[data-field-name="' + fieldName + '"]',
+                $.proxy(self.onRefreshDependants, self, fieldName, toRefresh)
+            )
+        })
+    }
+
+    /*
+     * Dispose of the dependant field handlers
+     */
+    FormWidget.prototype.unbindDependants = function() {
+        var fieldMap = this._getDependants()
+
+        $.each(fieldMap, function(fieldName, toRefresh) {
+            $(document).off('change.oc.formwidget', '[data-field-name="' + fieldName + '"]')
+        })
+    }
+
+    /*
+     * Retrieve the dependant fields
+     */
+    FormWidget.prototype._getDependants = function() {
         if (!$('[data-field-depends]', this.$el).length) {
             return;
         }
 
-        var self = this,
-            fieldMap = {},
+        var fieldMap = {},
             fieldElements = this.getFieldElements()
 
         /*
@@ -119,15 +160,7 @@
             })
         })
 
-        /*
-         * When a master is updated, refresh its slaves
-         */
-        $.each(fieldMap, function(fieldName, toRefresh) {
-            $(document).on('change.oc.formwidget',
-                '[data-field-name="' + fieldName + '"]',
-                $.proxy(self.onRefreshDependants, self, fieldName, toRefresh)
-            );
-        })
+        return fieldMap
     }
 
     /*
@@ -203,6 +236,15 @@
         }
     }
 
+    /*
+     * Unbind the lazy tab handlers
+     */
+    FormWidget.prototype.unbindLazyTabs = function() {
+        var tabControl = $('[data-control=tab]', this.$el)
+
+        $('.nav-tabs', tabControl).off('click', '.tab-lazy [data-toggle="tab"]')
+    }
+
     /*
      * Hides tabs that have no content, it is possible this can be
      * called multiple times in a single cycle due to input.trigger.
@@ -262,6 +304,13 @@
             .nextUntil('.section-field').hide()
     }
 
+    /*
+     * Unbinds collapsible section handlers
+     */
+    FormWidget.prototype.unbindCollapsibleSections = function() {
+        $('.section-field[data-field-collapsible]', this.$form).off('click')
+    }
+
     FormWidget.DEFAULTS = {
         refreshHandler: null,
         refreshData: {}