Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Scrolling bug when opening subsequent dialogs

See original GitHub issue

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.5.0

What browser are you using?

Chrome

Reproduction URL

CodeSandbox minimal reproduction

Describe your issue

Related to #1000, opening a new Dialog from within another causes a bug with scrolling, as shown in the gif on the original issue.

I’m opening a new issue as there was no minimal reproduction in the original. One workaround described here https://github.com/tailwindlabs/headlessui/issues/1000#issuecomment-1001841999 which involves adding a 500ms delay before opening the next Dialog seems to fix the problem.

Issue Analytics

State:
Created 2 years ago
Reactions:11
Comments:10

Top GitHub Comments

7reactions

liho00commented, Mar 26, 2022

Same issue here +1 Temporary solution

global style

html {
  overflow: auto !important;
}

I sacrificed user experience with this fix…else unable to scroll to webpage even worst user experience…

3reactions

phuhlcommented, Mar 7, 2022

I have the same issue, but wanted to point out, that also for no apparent reason I get the There are no focusable elements inside the <FocusTrap /> warning. I am pretty confident, that my dialogs always have focusable elements inside, this only happens, when I open the second dialog while closing the first one. (Before, this even caused a crash, but thankfully, that was resolved in https://github.com/tailwindlabs/headlessui/issues/407).

Top Results From Across the Web

Clicking and scrolling in dialogue boxes - Apple Discussions

Hi, I have an M1 Mac Mini with 16Gb RAM. I have a problem being unable to click or scroll inside dialogue boxes....

Windows 10 auto scrolling in system menus

If yes, you may have possibly locked it in when scrolling. Try pressing the middle mouse wheel to see it it stops the...

FIX: Windows 10/11 Scrolling down on its own. - wintips.org

Method 1: Disable 'Scroll inactive windows when hovering over them' option. This problem has been reportedly resolved by changing the Mouse settings. 1....

Scroll bar issue with jQuery modal dialog using iFrame

But the issue is, it shows a scroll bar on modal dialog page as well. I tried to remove inner scroll bar by...

#4539 (Modal Dialog Opening Offscreen After Scrolling ...

It appears that calling .dialog('open') causes the viewport of the browser window to scroll to the top of the page. The dialog appears...