From 4ede72223e6819d9e7b97fa508c71e7c62ff4b11 Mon Sep 17 00:00:00 2001
From: Serhii Kulykov <iamkulykov@gmail.com>
Date: Mon, 24 Feb 2025 14:12:34 +0200
Subject: [PATCH] fix: do not set position and max-width when dialog size is
 set (#8722)

---
 packages/dialog/src/vaadin-dialog-base-mixin.js      |  2 +-
 packages/dialog/src/vaadin-dialog-overlay-mixin.d.ts |  2 +-
 packages/dialog/src/vaadin-dialog-overlay-mixin.js   |  5 +++--
 packages/dialog/test/dialog.test.js                  | 10 ++++++++++
 4 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/dialog/src/vaadin-dialog-base-mixin.js b/packages/dialog/src/vaadin-dialog-base-mixin.js
index 83f5b6e18f4..d15c1c05232 100644
--- 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
index 27bece79630..6d2720cb5a4 100644
--- 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
index a082d97c54d..d23329e8e38 100644
--- 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
index abe35a3e912..743dd747614 100644
--- 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%');
+    });
   });
 });