fix: support dragging from a draggable node inside another shadow root (#188)

tomivirkki · web-flow · commit ca865f5a5f65 · 2020-09-08T15:10:20.000+03:00
diff --git a/src/vaadin-dialog-draggable-mixin.html b/src/vaadin-dialog-draggable-mixin.html
@@ -25,6 +25,11 @@
           _touchDevice: {
             type: Boolean,
             value: TOUCH_DEVICE
+          },
+
+          /* TODO: Expose as a public property (check naming) */
+          __dragHandleClassName: {
+            type: String
           }
         };
       }
@@ -53,7 +58,10 @@
           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 => {
+            return node.classList && node.classList.contains(this.__dragHandleClassName || '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/lib/utils/html-tag.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();
