Popover Forces Scrolling to Bottom of Page

[tgaeta]

Problem

Hey all, I've checked the solved/open issues for scrolling issues pertaining to using a Popover. None of those issues seemed to reveal a solution on how to mitigate the scrolling when a popover is opened. I have tried several different approaches from event listeners, stop propagation, useEffect to check if the popover is open, and then stop scrolling, etc. I've attached a video to demonstrate what is occurring.

I even tried upgrading tailwind to see if it would fix the issue but no luck. Can anyone think of a possible solution? Should I be using a different HeadlessUI component for this scenario?

Current Versions

"dependencies": {
  "tailwindcss": "3.0.24",
  "@headlessui/react": "1.7.2",
  "next": "12.1.4",
}

Demo

Screen.Recording.2023-02-21.at.1.03.35.PM.mov

Sample Code

return (
  <Popover className={cx('lg:hidden', popoverClassName)} data-testid={dataTestId} id="popover">
    {({ open }) => (
      <>
        {!open && <Popover.Button>{button}</Popover.Button>}
        <AnimatePresence initial={false}>
          {open && (
            <>
              <Popover.Overlay
                static
                key="overlay"
                className="bg-secondary-900/30 fixed inset-0 backdrop-blur-[2px]"
                {...overlayMotion}
              />
              <Popover.Panel static key="panel" className={customPanelClassName} {...panelMotion}>
                {children}
              </Popover.Panel>
            </>
          )}
        </AnimatePresence>
      </>
    )}
  </Popover>
);

*Update
When I test this in iOS Simulator, the page doesn't scroll (as expected). This appears to occur in the browser when the viewport is at mobile size. Tested in Safari, Brave, Chrome, and Firefox.

[chrisjansky]

Hi, I have a related issue: #2388

Did you manage to find a fix? 🙏