Modal allows background text selection & scroll

[marchellodev]

When the modal window is open, the user can still scroll the background content (via the mouse wheel) or select all text (via Ctrl+A).

To minimally reproduce this:

1. open https://solid-headless.vercel.app/preview/dialog
2. open dev tools and add a lot of text after the button html code
3. open the modal window
4. try scrolling or pressing Ctrl+A to select all the text

The issue might be related to tailwindlabs/headlessui#1056
Also maybe it has something to do with the fact that I am using astro js, but I do not think so.

[marchellodev]

A temporary fix inspired by https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/components/dialog/dialog.tsx (and a lot of googling):

  function closeModal() {
    setIsOpen(false);
    document.documentElement.style.overflow = "";
    document.documentElement.style.paddingRight = "";
  }

  function openModal() {
    const scrollbarWidth = window.innerWidth - document.body.offsetWidth
    setIsOpen(true);
    document.documentElement.style.overflow = "hidden";
    document.documentElement.style.paddingRight = scrollbarWidth+'px';
  }

[marchellodev]

The text is still selectable with Ctrl+A though :(

[lxsmnsyc]

Hmmm interesting behavior, I'll take a look

Edit:

• For background scrolling, it's noteworthy that the solution is to add pointer-events: none; to DialogOverlay. I do not want to add this to the component by default since scrolling isn't really described in the specification (besides mouse interaction, of course).
• Ctrl + A theoretically can be "overridden", but like in the specification, there's no mention about what to do with text selection. I'm not sure if this is that of a huge issue (?), so I'm not that convinced yet.

[marchellodev]

I have tried adding pointer-events: none;, but I can still scroll the background and now when I click on the background, the modal does not close :)

<DialogOverlay class="fixed inset-0 bg-white bg-opacity-40 pointer-events-none" />

[marchellodev]

btw, when the modal is wrapped inside <dialog>, Ctrl+A works as it is supposed to:)

[lxsmnsyc]

the modal does not close :)

Right, that went over my head 🤣 so it's not the solution then. Let's see

Ctrl+A works as it is supposed to:)

Well yes but that's an HTML specification, not an ARIA specification actually. There's no mention for managing text selection

Edit:
Funny thing is that the HTML spec doesn't mention anything about this either which is why I don't have any motivation if this should be implemented or not.