Issue #2902429 by drpal, droplet, tedbow: Remove previous event handlers when...

Issue #2902429 by drpal, droplet, tedbow: Remove previous event handlers when opening new off-canvas block edit form in the off-canvas dialog

core/modules/outside_in/js/off-canvas.es6.js

@@ -45,13 +45,28 @@
       return $element.is('#drupal-off-canvas');
     },
 
+    /**
+     * Remove off-canvas dialog events.
+     *
+     * @param {jQuery} $element
+     *   The target element.
+     */
+    removeOffCanvasEvents($element) {
+      $element.off('.off-canvas');
+      $(document).off('.off-canvas');
+      $(window).off('.off-canvas');
+    },
+
     /**
      * Handler fired before an off-canvas dialog has been opened.
      * @param  {Object} settings
      *   Settings related to the composition of the dialog.
      * @return {undefined}
      */
-    beforeCreate({ settings }) {
+    beforeCreate({ settings, $element }) {
+      // Clean up previous dialog event handlers.
+      Drupal.offCanvas.removeOffCanvasEvents($element);
+
       $('body').addClass('js-tray-open');
       settings.dialogClass += ' ui-dialog-off-canvas';
       // @see http://api.jqueryui.com/position/
@@ -72,11 +87,11 @@
      * Handler fired after an off-canvas dialog has been closed.
      * @return {undefined}
      */
-    beforeClose() {
+    beforeClose({ $element }) {
       $('body').removeClass('js-tray-open');
       // Remove all *.off-canvas events
-      $(document).off('.off-canvas');
-      $(window).off('.off-canvas');
+      Drupal.offCanvas.removeOffCanvasEvents($element);
+
       Drupal.offCanvas.$mainCanvasWrapper.css(`padding-${Drupal.offCanvas.getEdge()}`, 0);
     },
 

core/modules/outside_in/js/off-canvas.js

@@ -14,8 +14,16 @@
     isOffCanvas: function isOffCanvas($element) {
       return $element.is('#drupal-off-canvas');
     },
+    removeOffCanvasEvents: function removeOffCanvasEvents($element) {
+      $element.off('.off-canvas');
+      $(document).off('.off-canvas');
+      $(window).off('.off-canvas');
+    },
     beforeCreate: function beforeCreate(_ref) {
-      var settings = _ref.settings;
+      var settings = _ref.settings,
+          $element = _ref.$element;
+
+      Drupal.offCanvas.removeOffCanvasEvents($element);
 
       $('body').addClass('js-tray-open');
       settings.dialogClass += ' ui-dialog-off-canvas';
@@ -28,16 +36,18 @@
 
       settings.height = $(window).height();
     },
-    beforeClose: function beforeClose() {
+    beforeClose: function beforeClose(_ref2) {
+      var $element = _ref2.$element;
+
       $('body').removeClass('js-tray-open');
 
-      $(document).off('.off-canvas');
-      $(window).off('.off-canvas');
+      Drupal.offCanvas.removeOffCanvasEvents($element);
+
       Drupal.offCanvas.$mainCanvasWrapper.css('padding-' + Drupal.offCanvas.getEdge(), 0);
     },
-    afterCreate: function afterCreate(_ref2) {
-      var $element = _ref2.$element,
-          settings = _ref2.settings;
+    afterCreate: function afterCreate(_ref3) {
+      var $element = _ref3.$element,
+          settings = _ref3.settings;
 
       var eventData = { settings: settings, $element: $element, offCanvasDialog: this };
 
@@ -47,8 +57,8 @@
 
       $(window).on('resize.off-canvas', eventData, debounce(Drupal.offCanvas.resetSize, 100)).trigger('resize.off-canvas');
     },
-    render: function render(_ref3) {
-      var settings = _ref3.settings;
+    render: function render(_ref4) {
+      var settings = _ref4.settings;
 
       $('.ui-dialog-off-canvas, .ui-dialog-off-canvas .ui-dialog-titlebar').toggleClass('ui-dialog-empty-title', !settings.title);
     },