bug: Buttons in modals have unexpected borders when content behind them is focused

[vsquared56]

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!

[github-actions]

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.

[saadeghi]

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.

[vsquared56]

Thank you for the explanation, that makes perfect sense!