Make dropdown menu disappear after link is clicked

Dash Python
1

Hi there

I have a dbc dropdownmenu in my navbar. It is a dropdown menu that updates dynamically. The problem I’m having is, because it updates dynamically, whenever I click on a link in the drop down, I am taken to the correct page but the dropdown is still open. How do I have it close after clicking a link?

Thank you!

2

Hey @john.horton

Are you able to share a simple example that reproduces the issue? Not sure I completely understand based on your description.

3

Hi @tcbegley

here is an example taken from https://dash-bootstrap-components.opensource.faculty.ai/l/components/dropdown_menu

import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output

dropdown = html.Div(
[
dbc.DropdownMenu(
[
dbc.DropdownMenuItem(“A button”, id=“dropdown-button”),
dbc.DropdownMenuItem(
“Internal link”, href="/l/components/dropdown_menu"
),

        ],
        label="Menu",
    ),
    html.P(id="item-clicks", className="mt-3"),
]

)

@app.callback(
Output(“item-clicks”, “children”), [Input(“dropdown-button”, “n_clicks”)]
)
def count_clicks(n):
if n:
return f"Button clicked {n} times."
return “Button not clicked yet.”

4

@tcbegley When I click on “internal link” i am taken to that link. However, if you scroll down you will see that the menu toggle is still open and i’d like it to close when I click on the link

5

Looks like a bug, I raised this issue to track it. Pretty sure it’s because the internal link calls preventDefault to stop the browser refreshing the page, but in doing so stops the menu from being dismissed. Will look into a fix.