Dash Mantine Popover in callbacks

Dash Python
1

I’d like to use the “opened” state of popover in a callback to disable a tooltip. Right now I am using it in an input like so…

Input("ai_assistant_popover", "opened")

However, the callback is not triggering. “ai_assistant_popover” is the id for the dmc.popover component. Is there another way to determine whether the dropdown of a popover is open or not?

2

Hi @mworth

There is probably a way to do some event listener in a clientside callback… but no easy way right now.

I’ve opened a feature requests in the dmc GitHub and you can follow the progress there: [Feature Request] Allow Popover `opened` prop to trigger a callback · Issue #328 · snehilvj/dash-mantine-components · GitHub

3

Sounds good, I’ll keep an eye out for it. Thank you!

4

Hi @mworth

In the meantime, here is a workaround:

  • Make the popover so that it can only be opened and closed by the button
    closeOnClickOutside=False,
    closeOnEscape=True,
  • Then in a callback, you can use the button’s n_clicks to determine if the callback is opened or closed.

import dash_mantine_components as dmc
from dash import Dash, _dash_renderer, Input, Output
_dash_renderer._set_react_version("18.2.0")

app = Dash(external_stylesheets=dmc.styles.ALL)


popover = dmc.Popover(
    [
        dmc.PopoverTarget(dmc.Button("Toggle Popover", id="btn-popover", n_clicks=0)),
        dmc.PopoverDropdown(dmc.Text("This popover is opened on button click")),
    ],
    width=200,
    position="bottom",
    withArrow=True,
    shadow="md",
    closeOnClickOutside=False,
    closeOnEscape=True,
    id="popover"
)


app.layout = dmc.MantineProvider([
    dmc.Text(id="container-popover"),
    popover
])

@app.callback(
    Output("container-popover", "children"),
    Input("btn-popover", "n_clicks"),
)
def update(n):
    if n % 2 == 0 :
        return "popover closed"
    return "popover opened"



if __name__ == "__main__":
    app.run(debug=True)