Put overflow hidden to body when Menu (Dropdown) or Popover is open

[danestves]

Hi! We were facing a situation where we don't want that the user can scroll the page when the Menu or Popover is open (we use both in some pages) we love the way that Material UI made it:

The pass a keepAlive prop to Menu component and depending on that prop they can make use of the overflow hidden in the body. This is useful when for example we have a dropdown inside a menu that hides from the viewport if you scroll down, but if you scroll up the menu, appear (sticky) so it could be great to have that functionality inside Headless UI

This is the type of behaviour that we want to avoid

ff500f1ca83a27dbc88edb2f20f3b553.mp4

[chrisk-7777]

I ran into something similar, and tried a few different workarounds, like refs + attribute listeners. All felt a bit hacky.

This ended up being a pretty reasonable solution imo:

<Menu as="div" className="relative md:hidden">
  {({ open }) => {
    document.body.classList.toggle('overflow-y-hidden', open);

    return (
      <>
        {open && <div className="fixed inset-0 bg-black/25" />}
        <Menu.Button className="h-10 w-10 flex justify-center items-center">
          <Bars3Icon className="h-6 w-6 text-slate-900" />
        </Menu.Button>
        <Menu.Items className="absolute right-0 mt-3 min-w-[160px] origin-top-right rounded-md bg-white">
          <div className="px-3 py-1">
            {links.map(({ label, href }) => (
              <Menu.Item key={href}>
                <Link
                  href={href}
                  className="..."
                >
                  {label}
                </Link>
              </Menu.Item>
            ))}
          </div>
        </Menu.Items>
      </>
    );
  }}
</Menu>

Key notes:

• Leverage the render function for <Menu />.
• It exposes an open prop, use that to show/hide an overlay as needed (the "fixed" div above)
• Also use the open prop to toggle on/off a body class as needed

From what I can see, this does fire when open changes state, but also for other things such as hovering items, tabbing through, etc. If you concerned about perf on toggling a body class, you could store the value in a ref to cross check the previous value.

[tgaeta]

This looks like a solid solution! I just couldn't get it to work on my Popover. I know you're using Menu, so maybe that's why. I'm using the popover from the bottom of the screen and when it opens, the whole page scrolls to the bottom. I even observed the scrolling happening before it hit the debugger:

<Popover
  className={cx('lg:hidden', popoverClassName)}
  data-testid={dataTestId}
  id="bottom-popover"
>
  {({ open }) => {
    debugger; // page scroll happens before the debugger 🤯