fix: do not bubble drag events to parent dialogs (#11525) (#11527)

Co-authored-by: Sascha Ißbrücker <sissbruecker@vaadin.com>

Author: vaadin-bot

packages/dialog/src/vaadin-dialog-draggable-mixin.js

@@ -103,9 +103,7 @@ export const DialogDraggableMixin = (superClass) =>
             this.top = top;
             this.left = left;
           }
-          this.dispatchEvent(
-            new CustomEvent('drag-start', { bubbles: true, composed: true, detail: { width, height, top, left } }),
-          );
+          this.dispatchEvent(new CustomEvent('drag-start', { detail: { width, height, top, left } }));
         }
       }
     }
@@ -135,9 +133,7 @@ export const DialogDraggableMixin = (superClass) =>
 
     /** @private */
     _stopDrag() {
-      this.dispatchEvent(
-        new CustomEvent('dragged', { bubbles: true, composed: true, detail: { top: this.top, left: this.left } }),
-      );
+      this.dispatchEvent(new CustomEvent('dragged', { detail: { top: this.top, left: this.left } }));
       window.removeEventListener('mouseup', this._stopDrag);
       window.removeEventListener('touchend', this._stopDrag);
       window.removeEventListener('mousemove', this._drag);

packages/dialog/test/draggable-resizable.test.js

@@ -849,6 +849,71 @@ describe('nested draggable dialogs', () => {
     expect(Math.floor(childDraggedBounds.top)).to.be.eql(Math.floor(childBounds.top));
     expect(Math.floor(childDraggedBounds.left)).to.be.eql(Math.floor(childBounds.left));
   });
+
+  it('should not bubble "drag-start" event to parent dialog', () => {
+    const spy = sinon.spy();
+    parentDialog.addEventListener('drag-start', spy);
+
+    drag(childHeader, dx, dx);
+
+    expect(spy.called).to.be.false;
+  });
+
+  it('should not bubble "dragged" event to parent dialog', () => {
+    const spy = sinon.spy();
+    parentDialog.addEventListener('dragged', spy);
+
+    drag(childHeader, dx, dx);
+
+    expect(spy.called).to.be.false;
+  });
+});
+
+describe('nested resizable dialogs', () => {
+  let parentDialog, childDialog, childResizer, dx;
+
+  beforeEach(async () => {
+    parentDialog = fixtureSync('<vaadin-dialog resizable opened></vaadin-dialog>');
+    await nextRender();
+
+    parentDialog.renderer = (root) => {
+      if (!root.firstChild) {
+        root.innerHTML = '<div>Parent dialog content</div>';
+
+        childDialog = document.createElement('vaadin-dialog');
+        childDialog.resizable = true;
+        childDialog.renderer = (childRoot) => {
+          childRoot.innerHTML = '<div>Child dialog content</div>';
+        };
+        root.appendChild(childDialog);
+      }
+    };
+    await nextUpdate(parentDialog);
+
+    childDialog.opened = true;
+    await nextRender();
+
+    childResizer = childDialog.$.overlay.$.overlay.querySelector('.se');
+    dx = 30;
+  });
+
+  it('should not bubble "resize-start" event to parent dialog', () => {
+    const spy = sinon.spy();
+    parentDialog.addEventListener('resize-start', spy);
+
+    resize(childResizer, dx, dx);
+
+    expect(spy.called).to.be.false;
+  });
+
+  it('should not bubble "resize" event to parent dialog', () => {
+    const spy = sinon.spy();
+    parentDialog.addEventListener('resize', spy);
+
+    resize(childResizer, dx, dx);
+
+    expect(spy.called).to.be.false;
+  });
 });
 
 describe('touch', () => {