diff --git a/src/vaadin-dialog-draggable-mixin.html b/src/vaadin-dialog-draggable-mixin.html
index e04294f..c42835e 100644
--- 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
index 7973690..144ccb2 100644
--- 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
index c2c6296..8c5ef99 100644
--- a/test/vaadin-dialog_draggable-resizable-test.html
+++ b/test/vaadin-dialog_draggable-resizable-test.html
@@ -8,6 +8,8 @@
+
+
@@ -59,6 +61,7 @@
Draggable dialog
Draggable area
+
@@ -436,6 +439,14 @@
dispatchMouseEvent(target, 'mouseup', toXY, mouseButton);
}
+ before(() => {
+ customElements.define('internally-draggable', class extends Polymer.Element {
+ static get template() {
+ return Polymer.html`draggable
`;
+ }
+ });
+ });
+
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();