bug: Buttons in modals have unexpected borders when content behind them is focused
vsquared56 opened this issue · comments
What version of daisyUI are you using?
v4.6.1
Which browsers are you seeing the problem on?
All browsers
Reproduction URL
https://play.tailwindcss.com/EzYAemZy7d
Describe your issue
When a modal is opened in a way that seems to leave focus on another element, buttons inside the modal seem to have an unexpected border. Please see the example on Tailwind Play.
I'm not quite certain that it's related to focus, but e.g. clicking on a div to open the modal reproduces the issue, while clicking on a button to open the modal does not:
Clicking away within the modal causes the unexpected border to disappear, and usually prevents the issue from coming back for some time. But, I can usually reproduce the issue again by manually bringing focus to the div in Dev Tools, e.g.
Thanks in advance for the help!
Thank you @vsquared56
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.
It's not unexpected. It's just how HTML <dialog> element works.
When we open it using keyboard, the first focusable element inside <dialog> gets the focus because everything outside <dialog> can not be focused while the dialog is open.
Let me know if you have a question.
Thank you for the explanation, that makes perfect sense!