Modal with FloatingFocusManager and no autoFocus scrolling to top of page

[rob-johansen]

Modal with FloatingFocusManager and no autoFocus scrolling to top of page

[atomiks]

Version: @floating-ui/react v0.25.4

This is a bit old. What about the latest 0.26.13?

The lockScroll on FloatingOverlay could be a problem. What happens if it's removed? Without a minimal reproduction, it's hard to debug this though.

[rob-johansen]

I updated to 0.26.13 and the problem persists. I've been able to track it down to either lockScroll or this CSS:

html, body {
  height: 100%;
}

The problem goes away if I either comment that CSS out, or remove lockScroll. Unfortunately I still can't reproduce it in a code sandbox because my project is so complex.

[rob-johansen]

I just figured out the true problem:

html {
  overflow-y: scroll;
}

The sad part is that I have no idea why I ever added that (it was lurking at the bottom of my global CSS file). 🤦‍♂️

Sorry for wasting your time, but if someone else runs into this hopefully they can learn from my mistake.

[rob-johansen]

FWIW, I was able to reproduce it in this code sandbox:

https://codesandbox.io/p/sandbox/floating-ui-react-dom-template-forked-46xcfw?file=%2Fsrc%2Fstyles.css%3A2%2C5

[atomiks]

It's probably good to mention this potential issue under a Troubleshooting section for FloatingOverlay docs then 👍

[rob-johansen]

I quickly discovered why I had added that CSS! It prevents layout shift in scenarios like these:

• A page goes from loading, where no scrollbar is present, to showing enough content that a scrollbar appears (see this example from Josh Comeau)
• You simply navigate from a page in your app that has no scrollbar (not much content), to another page in your app that does have a scrollbar (and now your nav, for example, shifts the width of the scrollbar)

So now I've added the CSS back, along with this little "fix" at the top of my Modal component:

useEffect((): () => void => {
  document.documentElement.style.overflowY = 'unset'
  return (): void => {
    document.documentElement.style.overflowY = 'scroll'
  }
}, [])