fix!: only set top and left properties on drag (#7970)

* fix!: only set top and left properties on drag * chore: update dev/dialog.html to not size root element
vaadin · Oct 14, 2024 · b3e1a4f · b3e1a4f
1 parent 1cc5372
commit b3e1a4f
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/dev/dialog.html b/dev/dialog.html
@@ -30,7 +30,10 @@
           return;
         }
 
-        root.style.maxWidth = '40em';
+        const container = document.createElement('div');
+        container.style.maxWidth = '40em';
+        container.style.minWidth = '20em';
+        root.appendChild(container);
 
         // Second dialog
         const dialog2 = document.createElement('vaadin-dialog');
@@ -49,7 +52,7 @@
           root2.appendChild(btnClose2);
         };
 
-        root.appendChild(dialog2);
+        container.appendChild(dialog2);
 
         // Open second dialog
         const btnOpen2 = document.createElement('vaadin-button');
@@ -63,7 +66,7 @@
           'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio laborum optio quo perferendis unde, fuga reprehenderit molestias cum laboriosam ipsa enim voluptatem iusto fugit. Sed, veniam repudiandae consectetur recusandae laudantium.';
         text.style.marginTop = '0';
 
-        root.append(text, btnOpen2);
+        container.append(text, btnOpen2);
       };
 
       dialog1.headerRenderer = (root) => {

diff --git a/packages/dialog/src/vaadin-dialog-draggable-mixin.js b/packages/dialog/src/vaadin-dialog-draggable-mixin.js
@@ -96,7 +96,8 @@ export const DialogDraggableMixin = (superClass) =>
           window.addEventListener('mousemove', this._drag);
           window.addEventListener('touchmove', this._drag);
           if (this.$.overlay.$.overlay.style.position !== 'absolute') {
-            this.$.overlay.setBounds(this._originalBounds);
+            const { top, left } = this._originalBounds;
+            this.$.overlay.setBounds({ top, left });
           }
         }
       }

diff --git a/packages/dialog/test/draggable-resizable.common.js b/packages/dialog/test/draggable-resizable.common.js
@@ -391,6 +391,16 @@ describe('draggable', () => {
     expect(Math.floor(draggedBounds.left)).to.be.eql(Math.floor(bounds.left + dx));
   });
 
+  it('should only change "position", "top", and "left" values on drag', () => {
+    drag(content);
+    const overlay = dialog.$.overlay.$.overlay;
+    const style = overlay.style;
+    expect(style.length).to.be.eql(3);
+    expect(style.position).to.be.ok;
+    expect(style.top).to.be.ok;
+    expect(style.left).to.be.ok;
+  });
+
   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();