Using Dialog and Transition causes page to load at bottom of dialog #3211
Unanswered
thelovesmith
asked this question in
Help
Replies: 1 comment
-
So, after playing around with some of the elements, I realized that the button is being focused on when the page loads. When I replace the button with a clickable div the scroll position starts at the top of the dialog. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Description:
I'm encountering an issue with the Dialog and Transition components from Headless UI in combination with Tailwind CSS. When my modal dialog opens, it initially loads scrolled to the bottom of the modal content, instead of the top. This happens despite setting the overflow properties to allow scrolling.
Steps to Reproduce:
Use Headless UI's Dialog and Transition components to create a modal.
Ensure the modal content is tall enough to require scrolling.
Open the modal and observe that it loads scrolled to the bottom.
Expected Behavior:
The modal should load scrolled to the top of the content, allowing the user to see the beginning of the modal content first.
Actual Behavior:
The modal loads scrolled to the bottom, forcing the user to scroll up to see the beginning of the modal content.
Code Example:
Here's a simplified version of my component:
Additional Information:
Tailwind CSS version: 3.1.8
Headless UI version: "1.7.19"
Browser: Chrome(Version 124.0.6367.203 )/Safari(Version 17.4.1 )/DuckDuckGO
Operating System: MacOS Sonoma 14
Beta Was this translation helpful? Give feedback.
All reactions