Dialog: Handling scrollbar shifts opening/closing a Dialog

[lkbr]

Thank you all your hard work, I'm loving Headless UI!

One challenge I'm having is handling content shifts caused by the scrollbar appearing/disappearing when opening/closing a Dialog. Has anyone figured out a nice way of solving this?

See attached video or codesandbox for some context:

114923361-a342b000-9e24-11eb-89a6-1ba3288a256c.mov

1. Notice when you close the Dialog, its content shifts to the right before the fade out transition completes.
2. Notice when opening/closing the Dialog, fixed items with mx-auto such as a navbar shift.

Any elegant solutions would be appreciated ✌️

[RobinMalfait]

Hey! Thank you for your question!
Much appreciated! 🙏

We already handle this in Headless UI itself by putting a padding-right on your html, and the value is the size of the scrollbar right before you start opening the dialog.

However, since you implemented the very first div as a fixed element, you sit on top of everything and that has a weird result.
In short, don't use fixed for your main layout, here are some changes I made: https://codesandbox.io/s/suspicious-rgb-05vdv?file=/pages/index.js

And because codesandbox' iframe can be weird, here is the standalone application: https://05vdv.sse.codesandbox.io

[lkbr]

Thank you for the quick reply and I appreciate the answer.

Concerning point 2 in my first comment: Just to clarify, it's not the first element that is fixed, just the navbar element. The rest of the content is outside the fixed navbar. Your example doesn't include a fixed navbar (it scrolls out of view as you scroll down). This part might might need to be solved in userland as it concerns elements outside of the Dialog. Coincidently, reach-ui dialog used react-remove-scroll which happens to expose this: https://github.com/theKashey/react-remove-scroll/#positionfixed-elements

Concerning point 1 in my first comment: Your example still includes the content shift before the Dialog disappears. Below is a video that hopefully clarifies:

Screen.Recording.2021-04-15.at.20.43.48.mov

Notice the instant before I click the dismissal button, the pointer is on the "I" of "Got it", but after I click it, the content shifts to the left so the cursor is over the "t" of "Got it"

Sorry for the barbaric debugging 🗡️

[Andrey-Bazhanov]

It can be fixed like this: https://codesandbox.io/s/headlessui-dialog-scroll-jumping-fix-f6uxv?file=/pages/index.js

[RobinMalfait]

This should be fixed in the latest version! However, make sure to cleanup some of Dialog code. For example, you don't require an open and static prop anymore (more info: https://headlessui.dev/react/dialog#transitions).