Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug: Modal "auto-scrolls" to the bottom #3283

Closed
khesualdo opened this issue Nov 20, 2024 · 2 comments
Closed

bug: Modal "auto-scrolls" to the bottom #3283

khesualdo opened this issue Nov 20, 2024 · 2 comments

Comments

@khesualdo
Copy link

What version of daisyUI are you using?

v4.9.0

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

https://play.tailwindcss.com/JGH2mvaANj

Describe your issue

When there is lots of content in the modal box, the modal "auto-scrolls" to the bottom when it is opened.

Not sure if this is considered best practice, but I currently have to do modalBoxRef.current.scrollTop = 0; (in React) because I want the user to see the contents of the modal from the very beginning.

I was able to reproduce the issue in Tailwind Play.
@github-actions GitHub Actions
Copy link

Thank you @khesualdo for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

@saadeghi
Copy link
Owner

This is the way HTML <dialog> works by default. when it get's open the first focusable element inside gets focus (in example, there's only one button at the end so it gets focus)

I can't do anything about it in CSS. It's the way HTML <dialog> works.
But you can add another focusable element if possible (like link, input, button etc) or you can control the focus using JS.

Let me know if you have a question.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@saadeghi @khesualdo