Dropdown closes when clicking inside the list element

[Nilson (Nils Heinemann)]

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

Live site: https://forum-gestaltung-wip.webflow.io/
Passwort: forummd

The image shows the buttons that I mean.

You can find the cookie modal insid the footer:

---

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

[joejola (Joseph Amato)]

Can you share a read-only?

[Nilson (Nils Heinemann)]

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

[joejola (Joseph Amato)]

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

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

[Nilson (Nils Heinemann)]

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.

[joejola (Joseph Amato)]

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

[Nilson (Nils Heinemann)]

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