feat: add draggable attribute to vaadin-dialog-overlay (#9784)

mukherjeesudebi · web-padawan · web-flow · commit 62ca786a7ad8 · 2025-07-29T16:56:03.000+02:00
* added draggable attribute

* added test case

* removed async

* added draggable change for lit

* Update test to also check for removing attribute

---------

Co-authored-by: web-padawan &lt;iamkulykov@gmail.com&gt;
diff --git a/packages/dialog/src/vaadin-dialog.js b/packages/dialog/src/vaadin-dialog.js
@@ -114,6 +114,7 @@ class Dialog extends DialogDraggableMixin(
         modeless="[[modeless]]"
         with-backdrop="[[!modeless]]"
         resizable$="[[resizable]]"
+        draggable$="[[draggable]]"
         restore-focus-on-close
         focus-trap
       ></vaadin-dialog-overlay>
diff --git a/packages/dialog/src/vaadin-lit-dialog.js b/packages/dialog/src/vaadin-lit-dialog.js
@@ -87,6 +87,7 @@ class Dialog extends DialogDraggableMixin(
         .modeless="${this.modeless}"
         .withBackdrop="${!this.modeless}"
         ?resizable="${this.resizable}"
+        ?draggable="${this.draggable}"
         restore-focus-on-close
         focus-trap
       ></vaadin-dialog-overlay>
diff --git a/packages/dialog/test/draggable-resizable.test.js b/packages/dialog/test/draggable-resizable.test.js
@@ -622,6 +622,14 @@ describe('draggable', () => {
     await nextRender();
     expect(getComputedStyle(dialog.$.overlay.$.overlay).maxWidth).to.equal('100%');
   });
+
+  it('should toggle draggable attribute on the overlay based on the property', async () => {
+    expect(dialog.$.overlay.hasAttribute('draggable')).to.be.true;
+
+    dialog.draggable = false;
+    await nextUpdate(dialog);
+    expect(dialog.$.overlay.hasAttribute('draggable')).to.be.false;
+  });
 });
 
 describe('touch', () => {
