search

saadeghi / daisyui

🌼 🌼 🌼 🌼 🌼  The most popular, free and open-source Tailwind CSS component library
https://daisyui.com
MIT License
34.13k stars 1.3k forks source link

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

Closed khesualdo closed 3 hours ago

khesualdo commented 1 day ago

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[bot] commented 1 day ago

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 commented 3 hours ago

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.