fix: support dragging the overlay from a draggable node inside anothe…

…r shadow root
vaadin · Sep 3, 2020 · bf6ae46 · bf6ae46
1 parent 43bc643
commit bf6ae46
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 1 deletion.
diff --git a/src/vaadin-dialog-draggable-mixin.html b/src/vaadin-dialog-draggable-mixin.html
@@ -53,7 +53,7 @@
           const isResizerContainer = e.target === resizerContainer;
           const isResizerContainerScrollbar = e.offsetX > resizerContainer.clientWidth || e.offsetY > resizerContainer.clientHeight;
           const isContentPart = e.target === this.$.overlay.$.content;
-          const isDraggable = e.target.classList.contains('draggable');
+          const isDraggable = e.composedPath().some(node => node.classList && node.classList.contains('draggable'));
           if ((isResizerContainer && !isResizerContainerScrollbar) || isContentPart || isDraggable) {
             !isDraggable && e.preventDefault();
             this._originalBounds = this._getOverlayBounds();

diff --git a/test/.eslintrc.json b/test/.eslintrc.json
@@ -3,6 +3,7 @@
     "WCT": false,
     "describe": false,
     "beforeEach": false,
+    "before": false,
     "fixture": false,
     "it": false,
     "expect": false,

diff --git a/test/vaadin-dialog_draggable-resizable-test.html b/test/vaadin-dialog_draggable-resizable-test.html
@@ -8,6 +8,8 @@
   <link rel="import" href="../../iron-test-helpers/iron-test-helpers.html">
   <link rel="import" href="../src/vaadin-dialog.html">
   <link rel="import" href="../../vaadin-text-field/vaadin-text-area.html">
+  <link rel="import" href="../../polymer/polymer-element.html">
+  <link rel="import" href="../../polymer/polymer.html">
 </head>
 
 <body>
@@ -59,6 +61,7 @@
         <template>
           <div>Draggable dialog</div>
           <div class="draggable">Draggable area</div>
+          <internally-draggable></internally-draggable>
           <button>OK</button>
         </template>
       </vaadin-dialog>
@@ -436,6 +439,14 @@
           dispatchMouseEvent(target, 'mouseup', toXY, mouseButton);
         }
 
+        before(() => {
+          customElements.define('internally-draggable', class extends Polymer.Element {
+            static get template() {
+              return Polymer.html`<div class="draggable">draggable</div>`;
+            }
+          });
+        });
+
         beforeEach(() => {
           dialog = fixture('draggable');
           container = dialog.$.overlay.$.resizerContainer;
@@ -466,6 +477,13 @@
           expect(Math.floor(draggedBounds.left)).to.be.eql(Math.floor(bounds.left + dx));
         });
 
+        it('should drag and move dialog if mousedown on element with [class="draggable"] in another shadow root', () => {
+          drag(dialog.$.overlay.querySelector('internally-draggable').shadowRoot.querySelector('.draggable'));
+          const draggedBounds = container.getBoundingClientRect();
+          expect(Math.floor(draggedBounds.top)).to.be.eql(Math.floor(bounds.top + dx));
+          expect(Math.floor(draggedBounds.left)).to.be.eql(Math.floor(bounds.left + dx));
+        });
+
         it('should drag and move dialog after resizing', () => {
           resize(container.querySelector('.s'), 0, dx);
           const bounds = container.getBoundingClientRect();