Streaming live at 10am (PST)

Dropdown closes when clicking inside the list element

Hi there,

I´ve got a cookie-modal on my site with some buttons inside of a dropdown menu.
Everything works fine, expect on mobile devises.
When clicking on one of the “active or inactive” buttons inside of the dropdown menu, the dropdown closes automatically. But it should stay open, until the user clicks (or touches) outside of the dropdown menu.

You can find the dropdown menu and the buttons when clicking on “Einstellungen ändern” on the bottom.

Does anyone know, why this happens and what to do? Once again: It only happens on mobile devises. Thank you :pray:

Live site:
Passwort: forummd

The image shows the buttons that I mean.

You can find the cookie modal insid the footer:
Bildschirmfoto 2021-12-10 um 16.50.55

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Can you share a read-only?

Hi @joejola It´s already there.
Here is my site Read-Only: LINK

At a glance, it may be because your buttons use the dropdown trigger instead of the button component.

Screen Shot 2021-12-10 at 10.36.30 AM

I personally wouldn’t use the dropdown component. I would build an accordion using divs. This is how I build mine.

Screen Shot 2021-12-10 at 10.43.19 AM

Thanks for the reply. Maybe it´s the best solution to use a custom dropdown.
But I thought it´s a common use of the dropdown-component, to use it as a list with buttons inside…
I didn´t expect, that the dropdown will close, by clicking on a button inside the dropdown-list on mobile devices.

On second look, the button inside shouldn’t be causing that. Did you try building the custom dropdown?

Yes I have build a nav menu with custom dropdowns.
Unfortunatly the hover-in and hover-out interactions are not working so robust like the “real” dropdown.
So if you hover in and out too fast, the menu is glitchy… Maybe you have an idea how to make it more robust?
The custom dropdowns