[confirm-dialog] Opening dialog scrolls to end of the page

[sissbruecker]

Description

Adding and opening a confirm dialog at the end of the body results in scrolling to the end of the page. This is a regression in v25.

Other observations:

• Adding the dialog as the first child of the body results in scrolling to the top instead
• Changing the scroll position while the dialog is opened and rotating focus with Tab also results in the scroll position changing as soon as the focus moves back to the dialog element

https://github.com/user-attachments/assets/2bd6d73a-2d61-41c3-899c-dc902a5053aa

Expected outcome

The scroll position should not change.

Minimal reproducible example

    <script type="module">
      import '@vaadin/button';
      import '@vaadin/confirm-dialog';

      document.querySelector('vaadin-button').addEventListener('click', () => {
        const dialog = document.createElement('vaadin-confirm-dialog');
        dialog.header = 'Header';
        dialog.message = 'Message';
        dialog.cancelButtonVisible = true;
        dialog.opened = true;
        document.body.appendChild(dialog);
      });
    </script>

    <style>
      .container {
        font-size: 64px;
        line-height: 128px;
        font-weight: bold;
      }
    </style>

    <vaadin-button>
      Show dialog
    </vaadin-button>
    <div class="container">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10</div>

Steps to reproduce

See above.

Environment

Vaadin version(s): 25

Browsers

No response

[web-padawan]

This could be probably fixed by changing focus() for the submit button to use focus({ preventScroll: true }).

[knoobie]

This also affects the normal dialog in my application testing 25.0.0-rc1

[tomivirkki]

dialog.style.position = 'fixed'; fixes the issue at least in this case

[knoobie]

Can confirm, this would also fix the issue for my dialog case