Scrollable dropdown menu inside a collapsible

[ritvij14]

I am creating a modal with multiple collapsible, each with settings for filtering a searching functionality. Now among those filters are some which need a dropdown list where a user can select an item, but when I use dropdown inside collapsible, the dropdown-content component doesn't render.

Anyone who can help?

[saadeghi]

That combination is challenging and here's the issue:

1. You can't use the Collapse with focus example and put a dropdown inside it because they both work with focus and in a HTML page only one element can be focused at a time. so when we open the collapse using a focus event, it will stay open as long as it's focused and when we open the dropdown inside, it will lose focus and get's closed. that's just a expected CSS behaviour.
2. You can use Collapse with checkbox for that because you can keep the collapse open using the checkbox value and then you're able to open the dropdown by focusing it. it works but there's another challenge here: collapse and collapse-content have overflow:hidden because it has to hide the content when it's closed.

I'm trying to fix this limit in daisyUI 3.0 (coming in last week of May) but for now, here's a workaround:

1. add overflow-visible class to collapse

2. add [input[type=checkbox]:checked~&]:overflow-visible class to collapse-content

   Example: https://play.tailwindcss.com/I6Wz9g5lcA

[alon-codes]

Thanks for the answer, changing modal css overflow-y to visible worked for me.

[ritvij14]

@saadeghi thank you so much for the fast reply and the code example, that's exactly what I needed.

Also, thanks for creating such a great library, me and my colleagues love it :D

[Dmitri-Sintsov]

Setting overflow-visible to collapse and collapse-content elements was not enough for me to prevent part of dropdown being hidden by opened collapse section with Tailwind 4.1.13 / Daisy UI 5.0.50 . I also had to add isolation-auto class to collapse element:

class CollapsibleSubsection extends Component {

    onClickCollapse(ev) {
        this.collapseContentRef.current.style.overflowY = this.collapseInputRef.current.checked ? 'visible' : 'hidden';
        ev.target.blur();
    }

    collapseInputRef = createRef(null);
    collapseContentRef = createRef(null);

    render({propComponent, prop, nameSuffix}, state) {
        // nameSuffix is useful for input[type=radio]
        return html`
            <div class="collapse collapse-arrow join-item !overflow-visible !isolation-auto">
                <input ref="${this.collapseInputRef}" type="checkbox" name="variant-accordion-${nameSuffix}" onClick="${this.onClickCollapse.bind(this)}" />
                <div class="collapse-title bg-base-100/90"><${AbSubtitle}>${prop.name}</${AbSubtitle}></div>
                <div ref="${this.collapseContentRef}" class="collapse-content text-base bg-base-100 border-base-300 border">
                    <${propComponent} subsection_items="${prop.children}" subsection="${prop}" />
                </div>
            </div>
        `;
    }

}

Now it works, however I am still unsure about all possible scenarios. CSS became too much magical in recent 10 years.