bug: collapse element selectable from closed dropdown content

[Hydhen]

What version of daisyUI are you using?

4.6.0

Which browsers are you seeing the problem on?

Chrome, Edge

Reproduction URL

https://play.tailwindcss.com/n2mMKEEkuQ

Describe your issue

Hello!

I try to combine an accordion inside a dropdown like so:

<div class="dropdown">
  <div tabindex="0" role="button" class="btn m-1">Click</div>
  <div tabindex="0" class="dropdown-content menu z-[1] w-52 rounded-box bg-base-100 p-2 shadow">
    <ul>
      <li>
        <div class="collapse bg-base-200">
          <input type="radio" name="my-accordion-1" checked="checked" />
          <div class="collapse-title text-xl font-medium">Click to open this one and close others</div>
          <div class="collapse-content">
            <p>hello</p>
          </div>
        </div>
      </li>
      ...
    </ul>
  </div>
</div>

My problem is that I can click on the collapse title and content while the dropdown is closed, from what I've seen that rule seems to be the problem:

.collapse:not(td):not(tr):not(colgroup) {
    visibility: visible;
}

[github-actions[bot]]

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

[Hydhen]

Here's how I fixed it so far:

/* Dropdown compatibility */
.dropdown:not(:focus-within) .collapse,
.dropdown:not(:focus-within) .collapse > * {
  visibility: collapse !important;
}

I'm forced to use the !important here because without it the rule gets overridden by this very specific one:

.collapse[open] > .collapse-content, .collapse-open > .collapse-content,
.collapse:focus:not(.collapse-close) > .collapse-content,
.collapse:not(.collapse-close) > input[type=checkbox]:checked ~ .collapse-content,
.collapse:not(.collapse-close) > input[type=radio]:checked ~ .collapse-content {
    visibility: visible;
    min-height: fit-content;
}

[saadeghi]

The selector is not the problem. The problem is, you're putting collapse inside a menu.

You don't need menu class here. And you don't need <ul> <li>.

Code example: https://play.tailwindcss.com/M8GziB2A96