fix: do not set position and max-width when dialog size is set (#8722)

vaadin · Feb 24, 2025 · 4ede722 · 4ede722
1 parent c0f8933
commit 4ede722
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 4 deletions.
diff --git a/packages/dialog/src/vaadin-dialog-base-mixin.js b/packages/dialog/src/vaadin-dialog-base-mixin.js
@@ -189,7 +189,7 @@ export const DialogBaseMixin = (superClass) =>
 
     /** @private */
     __sizeChanged(width, height) {
-      requestAnimationFrame(() => this.$.overlay.setBounds({ width, height }));
+      requestAnimationFrame(() => this.$.overlay.setBounds({ width, height }, false));
     }
 
     /**

diff --git a/packages/dialog/src/vaadin-dialog-overlay-mixin.d.ts b/packages/dialog/src/vaadin-dialog-overlay-mixin.d.ts
@@ -52,5 +52,5 @@ export declare class DialogOverlayMixinClass {
   /**
    * Updates the coordinates of the overlay.
    */
-  setBounds(bounds: DialogOverlayBoundsParam): void;
+  setBounds(bounds: DialogOverlayBoundsParam, absolute: boolean): void;
 }
diff --git a/packages/dialog/src/vaadin-dialog-overlay-mixin.js b/packages/dialog/src/vaadin-dialog-overlay-mixin.js
@@ -196,12 +196,13 @@ export const DialogOverlayMixin = (superClass) =>
     /**
      * Updates the coordinates of the overlay.
      * @param {!DialogOverlayBoundsParam} bounds
+     * @param {boolean} absolute
      */
-    setBounds(bounds) {
+    setBounds(bounds, absolute = true) {
       const overlay = this.$.overlay;
       const parsedBounds = { ...bounds };
 
-      if (overlay.style.position !== 'absolute') {
+      if (absolute && overlay.style.position !== 'absolute') {
         overlay.style.position = 'absolute';
         this.setAttribute('has-bounds-set', '');
       }

diff --git a/packages/dialog/test/dialog.test.js b/packages/dialog/test/dialog.test.js
@@ -332,5 +332,15 @@ describe('vaadin-dialog', () => {
       expect(overlay.style.width).to.be.equal('100px');
       expect(overlay.style.height).to.be.equal('200px');
     });
+
+    it('should not change position and max-width when only width and height are set', async () => {
+      dialog.opened = true;
+      await nextRender();
+      dialog.width = 300;
+      dialog.height = 400;
+      await nextRender();
+      expect(getComputedStyle(overlay.$.overlay).position).to.equal('relative');
+      expect(getComputedStyle(overlay.$.overlay).maxWidth).to.equal('100%');
+    });
   });
 });