Sanitize Dialog cause always scroll top on `.showModal()`.

Open ve3 opened this issue 8 months ago • 0 comments

I have this code.

<!DOCTYPE html>
<html>
    <head>
        <style>
/* Sanitize below copy from this repository. */
/* Interactive
 * ========================================================================== */

/*
 * Add the correct styles in Safari.
 */

:where(dialog) {
  background-color: white;
  border: solid;
  color: black;
  height: -moz-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;
}


        </style>
    </head>
    <body>
        <p style="margin-bottom: 1200px;">paragraph</p>
        <button type="button" data-toggle="dialog" data-target="#my-dialog">
            Open dialog
        </button>

        <dialog id="my-dialog">
            <p>This is dialog.</p>
            <p>
                <input type="text" />
            </p>
            <button data-dismiss="dialog">Close</button>
        </dialog>
        
        <script>
            function activateDialog(selector) {
                const dialogE = document.querySelector(selector);
                dialogE.showModal();
            }


            document.addEventListener("click", (event) => {
              if (event.currentTarget?.activeElement?.dataset?.toggle === "dialog") {
                console.debug(
                    'clicking on `data-toggle="dialog" element.',
                    event.currentTarget.activeElement,
                )
                event.stopPropagation()
                let targetDialog = event.currentTarget.activeElement.dataset.target
                if (targetDialog) {
                    activateDialog(targetDialog);
                }
              }
            });


            document.querySelector('[data-dismiss="dialog"]').addEventListener('click', (event) => {
                event.stopPropagation();
                let target = event.target;
                if (target.closest('dialog')) {
                    target = target.closest('dialog');
                }

                console.debug('trying to close html dialog.', target);
                target.close();
            });

        </script>
    </body>
</html>

See it in action here.

The sanitize part showing (:where(dialog) {...}) is copied from this repository.

Scroll to the bottom of the page. Click on open dialog button.
When dialog opened, the page will be scroll to top if page height is too tall.

What I expect is dialog opened with modal (backdrop) and not scroll to top.

This will be working fine if I use dialog .show() but it is not with .showModal().

Apr 08 '25 18:04 ve3