bug: Collapse inside Bottom Modal glitches the open animation

[brunocalou]

Reproduction URL (Required)

https://codepen.io/brunocalou/pen/vEEpyWw

What version of daisyUI are you using?

5.0.32

Which browsers are you seeing the problem on?

All browsers

Describe your issue

When collapse component is rendered inside a bottom modal, the open animation doesn't work properly.

https://github.com/user-attachments/assets/8d247007-3e1b-43ab-9b45-b49cdb8d4768

https://github.com/user-attachments/assets/9bb5a267-579f-4d81-96e1-b8139f24fddf

I've investigated a little bit and the visibility property on collapse and collapse-content is causing this issue. I don't know why exactly, but for now, overriding it to unset fixes the issue.

<div class="collapse [visibility:unset]!">
  <div class="collapse-content [visibility:unset]!">
    ....
  </div>
</div>

https://github.com/user-attachments/assets/e7ee444d-0a5e-4ad8-a947-9cd10f798378

[github-actions[bot]]

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

[SebastienFouchard]

@brunocalou example clearly reproduces the issue, but the provided screenshots don’t fully capture the animation glitch.
Here is a new screenshot that better illustrates the problem.

https://github.com/user-attachments/assets/9141a64c-b83b-4afd-b414-1be5bd41b39e

[pdanpdan]

This seems to be related to visibility: visible set in https://github.com/saadeghi/daisyui/blob/1569957f38f659e9eba87a7e56a382f19c499470/packages/daisyui/src/components/collapse.css#L2

@saadeghi why is the first rule there? I cannot see a reason, and git blame does not help

https://play.tailwindcss.com/skTqwxHMpY?file=css

[saadeghi]

@pdanpdan
Class name conflict: https://tailwindcss.com/docs/visibility
collapse class name was added to Tailwind CSS after daisyUI introduced the collapse component class name.
Since Tailwind's collapse is an uncommon class name to use and is unrelated to daisyUI's collapse this selector avoids the conflict.

[pdanpdan]

Then maybe it should be changed to visibility: unset? Because visibility: visible produces some funny side effects when in a modal (the funny thing is that it makes an input inside the collapse autofocus, and this leads to browser scrolling it into view, which breaks the animation)

[pdanpdan]

For the moment this can be fixed by adding in your CSS:

@layer utilities {
  .collapse:not(td, tr, colgroup) {
    visibility: unset;
  }
}

[saadeghi]

Fixed in 5.1.30 thanks to @pdanpdan

[SebastienFouchard]

bug on first dialog open resolved, but persists on subsequent opens

Version: 5.3.10

https://github.com/user-attachments/assets/0444250a-a17b-42c7-8edb-9bd0a2bb43ef

[pdanpdan]

Can you create a play reproduction, please?

[SebastienFouchard]

@pdanpdan Sorry, I just tried to reproduce the bug — it seems to be coming from my project. The error is indeed no longer occurring. Thanks again for the fix!

[SebastienFouchard]

i fix also on my projet, I had some leftover test fixes on my side.

[pdanpdan]

I'm glad it's ok