How to know that dbc.DropdownMenu is opened?

I have a filter menu defined as below

filter_menu = dbc.DropdownMenu(
            id="filter-menu",
            label=[
                html.Img(src="assets/images/Filter.svg", height=24, width=24, style={"marginRight": "6px"}),
                html.Span("Filter"),
            ],
            children=[...],
            class_name="filter-menu",
            align_end=False,
        )

I need to use it’s state (opened/closed) as a callback Input
unfortunately, neither className, class_name or n_clicks reacts when user clicks on the dropdown button
is there any workaround? custom script?

I guess DropdownMenu doesn’t have the n_clicks prop.

Do you really need to use the callback directly in DropdownMenu and not in DropdownMenuItems?

From what I’ve researched, I don’t think it’s possible. If you don’t need DropdownMenuItems, I suggest you use the Buttom component.

You can use dash-intersection-observer to wrap an element in your dropdown menu which should trigger a callback depending on whether it is displayed on the screen :slight_smile:

Here’s the forum post that talks more about it Dash Intersection Observer

3 Likes