fix: avoid scrolling when dialog is focused (#10686) (#10689)

* fix: avoid scrolling when dialog is focused

* fix popover

* cleanup tests

* fix login overlay

* fix crud and rte dialogs

Co-authored-by: Sascha Ißbrücker <sissbruecker@vaadin.com>

Author: vaadin-bot

packages/confirm-dialog/src/vaadin-confirm-dialog.js

@@ -94,7 +94,7 @@ class ConfirmDialog extends ConfirmDialogMixin(ElementMixin(ThemePropertyMixin(P
       :host([opening]),
       :host([closing]) {
         display: block !important;
-        position: absolute;
+        position: fixed;
         outline: none;
       }
 

packages/confirm-dialog/test/confirm-dialog.test.js

@@ -712,6 +712,24 @@ describe('vaadin-confirm-dialog', () => {
       await aTimeout(0);
       expect(getDeepActiveElement()).to.equal(button);
     });
+
+    it('should not scroll the page when opening the dialog', async () => {
+      // Create a tall element to make the page scrollable
+      const spacer = fixtureSync(`
+        <div style="height: 200vh"></div>
+      `);
+      document.body.insertBefore(spacer, document.body.firstChild);
+
+      // Scroll to the top
+      window.scrollTo(0, 0);
+
+      // Open the dialog (which will focus it)
+      confirm.opened = true;
+      await oneEvent(overlay, 'vaadin-overlay-open');
+
+      // The page should not have scrolled
+      expect(window.scrollY).to.equal(0);
+    });
   });
 
   describe('detach and re-attach', () => {

packages/crud/src/vaadin-crud-dialog.js

@@ -101,7 +101,7 @@ class CrudDialog extends DialogBaseMixin(ThemePropertyMixin(PolylitMixin(LitElem
       :host([opening]),
       :host([closing]) {
         display: block !important;
-        position: absolute;
+        position: fixed;
       }
 
       :host,

packages/dialog/src/vaadin-dialog.js

@@ -120,7 +120,7 @@ class Dialog extends DialogSizeMixin(
       :host([opening]),
       :host([closing]) {
         display: block !important;
-        position: absolute;
+        position: fixed;
         outline: none;
       }
 

packages/dialog/test/dialog.test.js

@@ -276,6 +276,24 @@ describe('vaadin-dialog', () => {
       await nextRender();
       expect(getDeepActiveElement()).to.equal(button);
     });
+
+    it('should not scroll the page when opening the dialog', async () => {
+      // Create a tall element to make the page scrollable
+      const spacer = fixtureSync(`
+        <div style="height: 200vh"></div>
+      `);
+      document.body.insertBefore(spacer, document.body.firstChild);
+
+      // Scroll to the top
+      window.scrollTo(0, 0);
+
+      // Open the dialog (which will focus it)
+      dialog.opened = true;
+      await oneEvent(overlay, 'vaadin-overlay-open');
+
+      // The page should not have scrolled
+      expect(window.scrollY).to.equal(0);
+    });
   });
 
   describe('position/sizing', () => {

packages/login/src/vaadin-login-overlay.js

@@ -72,7 +72,7 @@ class LoginOverlay extends LoginFormMixin(LoginOverlayMixin(ElementMixin(Themabl
       :host([opening]),
       :host([closing]) {
         display: block !important;
-        position: absolute;
+        position: fixed;
         outline: none;
       }
 

packages/login/test/login-overlay.test.js

@@ -132,6 +132,34 @@ describe('no autofocus', () => {
   });
 });
 
+describe('scroll behavior', () => {
+  let login, overlay;
+
+  beforeEach(async () => {
+    login = fixtureSync('<vaadin-login-overlay></vaadin-login-overlay>');
+    await nextRender();
+    overlay = login.$.overlay;
+  });
+
+  it('should not scroll the page when opening the overlay', async () => {
+    // Create a tall element to make the page scrollable
+    const spacer = fixtureSync(`
+      <div style="height: 200vh"></div>
+    `);
+    document.body.insertBefore(spacer, document.body.firstChild);
+
+    // Scroll to the top
+    window.scrollTo(0, 0);
+
+    // Open the overlay (which will focus the username field)
+    login.opened = true;
+    await oneEvent(overlay, 'vaadin-overlay-open');
+
+    // The page should not have scrolled
+    expect(window.scrollY).to.equal(0);
+  });
+});
+
 describe('title and description', () => {
   let login, overlay, titleElement, descriptionElement;
 

packages/popover/src/vaadin-popover.js

@@ -229,7 +229,7 @@ class Popover extends PopoverPositionMixin(
       :host([opening]),
       :host([closing]) {
         display: block !important;
-        position: absolute;
+        position: fixed;
         outline: none;
       }
 

packages/popover/test/a11y.test.js

@@ -398,6 +398,29 @@ describe('a11y', () => {
         expect(focusSpy).to.be.calledOnce;
       });
     });
+
+    describe('scroll behavior', () => {
+      it('should not scroll the page when focusing the popover', async () => {
+        // Create a tall element to make the page scrollable
+        const spacer = fixtureSync(`
+          <div style="height: 200vh"></div>
+        `);
+        document.body.insertBefore(spacer, document.body.firstChild);
+
+        // Scroll to the top
+        window.scrollTo(0, 0);
+
+        // Open the popover
+        popover.opened = true;
+        await oneEvent(overlay, 'vaadin-overlay-open');
+
+        // Focus the popover programmatically
+        popover.focus();
+
+        // The page should not have scrolled
+        expect(window.scrollY).to.equal(0);
+      });
+    });
   });
 
   describe('Tab order', () => {

packages/rich-text-editor/src/vaadin-rich-text-editor-popup.js

@@ -36,6 +36,7 @@ class RichTextEditorPopup extends PolylitMixin(LitElement) {
       :host([opening]),
       :host([closing]) {
         display: contents !important;
+        position: fixed;
       }
 
       :host,