search

saadeghi / daisyui

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

bug: Right drawer get navigation focus if it has an input #2738

Closed robsontenorio closed 10 months ago

robsontenorio commented 10 months ago

What version of daisyUI are you using?

4.5.0

Which browsers are you seeing the problem on?

Chrome, Safari

Reproduction URL

https://play.tailwindcss.com/HFAwVO0YDc

Describe your issue

When you have a right drawer it get focus when using tabs from external elements.

Is that expected? Any smart workaround?

https://daisyui.com/components/drawer/#drawer-that-opens-from-right-side-of-page

github-actions[bot] commented 10 months ago

Thank you @robsontenorio 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.

robsontenorio commented 10 months ago

I could set tabindex="-1" to all inputs inside drawer, but user expects can hit tab inside that drawer to navigate no next inputs.

saadeghi commented 10 months ago

There isn't a way for CSS to conditionally disable tab navigation, but in HTML there's a inert attribute. You can use JS to add/remove inert to the sidebar div when the sidebar is closed to prevent tab navigation.

Let me know if you have any questions.