Avoid toggling accordian when a button in accordian control is clicked

Dash Python
1

How to avoid toggling of dash mantine accordion when a button in its control is clicked.

There is something called stopPropagation() in Javascript, but how to achieve that in dash mantine component.

Krishna

1 Like
2

Hi, are you sure this Is default behaviour? I didn’t experience this. Can you pls post some code and let us know which version of DMC you are using?

Also: DMC related questions go into the DMC discord help channels :wink:

Reg,
J.

3

dmc discord channel exists to make it easier for the community to discuss issues/developments related to dmc. But it’s not correct that they shouldn’t be asked here. In fact, not asking questions issues related to dmc in the forum will hurt dmc’s popularity and reach.

@krishvk can you please share an MRE of what you are trying to achieve?

4

Here is the smallest code I have an issue with

import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
from dash_extensions.enrich import DashProxy, html

app = DashProxy(
    prevent_initial_callbacks=True,
    suppress_callback_exceptions=True,
    transforms=[]
)

app.layout = html.Div(
dmc.Accordion(
    children=[
        dmc.AccordionItem(
            [
                dmc.AccordionControl(["Customization", dbc.Button("DBC Button"), dmc.Button("DMC Button")]),
                dmc.AccordionPanel(
                    "Colors, fonts, shadows and many other parts are customizable to fit your design needs"
                ),
            ],
            value="customization",
        ),
        dmc.AccordionItem(
            [
                dmc.AccordionControl("Flexibility"),
                dmc.AccordionPanel(
                    "Configure temp appearance and behavior with vast amount of settings or overwrite any part of "
                    "component styles "
                ),
            ],
            value="flexibility",
        ),
    ],
)

)

app.run_server(
    host='localhost', port=5050, threaded=True
)

I want the Accordian to toggle only when I click on the AccordianControl but not when I click the buttons in AccordianControl

5

I am not much into Discord but the site is blocked on my office laptop. Not sure if that’s a mistake.

6

Hi @krishvk

It looks like that option is not available for the component. The entire AccordionControl header is the toggle and not just the chevron icon – which acts as an indicator of the status of the element (open or closed). This is the same for the upstream mantine.dev as well.

7

Is there some css magic I can do to patch this?

8

Hmm…

My question, why are you having a button inside the control?

You could probably have button that is outside the control, but sits on top of the control.

1 Like
9

Here is a working example:

import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
from dash_extensions.enrich import DashProxy, html

app = DashProxy(
    prevent_initial_callbacks=True,
    suppress_callback_exceptions=True,
    transforms=[]
)

app.layout = html.Div(
dmc.Accordion(
    children=[
        dmc.AccordionItem(
            [
                html.Div([dbc.Button("DBC Button", style={'position':'absolute', 'left':'150px'}),
                          dmc.Button("DMC Button", style={'position':'absolute', 'left':'250px'}),
                dmc.AccordionControl(["Customization"])], style={'display':'flex', 'alignItems':'center'}),
                dmc.AccordionPanel(
                    "Colors, fonts, shadows and many other parts are customizable to fit your design needs"
                ),
            ],
            value="customization",
        ),
        dmc.AccordionItem(
            [
                dmc.AccordionControl("Flexibility"),
                dmc.AccordionPanel(
                    "Configure temp appearance and behavior with vast amount of settings or overwrite any part of "
                    "component styles "
                ),
            ],
            value="flexibility",
        ),
    ],
)

)

app.run_server(
    host='localhost', port=5050, threaded=True, debug=True
)

This is hard coded for the widths, the flexbox probably isnt necessary.

1 Like
10

Good question

I am using accordion as a three level drill down

Accordian controls have a grid to show some quick metrics. When all Accordian items are folded, it looks like a table.

Then I can expand one or more accordion panels to dive deep for a quick summary and compare different items.

Then I can click button to dive even more into one of the accordion

I want the accordion to be in control so that I don’t have to expand unless I need to

Hope that explains the use case

1 Like
11

Works like magic, thank you for it.

2 Likes