I have a bunch of buttons around my app that i want to toggle an accordion to be open. There are multiple buttons but one accordion so I am getting the error of
In the callback for output(s):
{"id":"accordion","idx":0,"prop":"state"}.data
Input 0 ({"index":MATCH,"type":"btn-click"}.n_clicks)
has MATCH or ALLSMALLER on key(s) index
where Output 0 ({"id":"accordion","idx":0,"prop":"state"}.data)
does not have a MATCH wildcard. Inputs and State do not
need every MATCH from the Output(s), but they cannot have
extras beyond the Output(s).
Whats the best hack to get this to work. Here is some base code
installed the following
- dash
- dash-extensions
- dash-mantine-components
import dash_mantine_components as dmc
from dash import State, MATCH, ctx
from dash.exceptions import PreventUpdate
from dash_extensions.enrich import Output, DashProxy, Input, MultiplexerTransform, html
app = DashProxy(transforms=[MultiplexerTransform()])
app.layout = html.Div(children=[
dmc.Button("toggle", id="toggle", n_clicks=0),
html.Br(),
*[dmc.Button(f"Button {i}" , id={"type": "btn-click", "index": i}) for i in range(5)],
dmc.Accordion(
children=[
dmc.AccordionItem("Data 1", label="One" ),
dmc.AccordionItem("Data 2", label="Two"),
],
id="accordion"
)])
@app.callback(
Output("accordion", "state"),
Input({"type": "btn-click", "index": MATCH}, "n_clicks"),
prevent_initial_call=True)
def toggle_accordion(clicks):
if clicks == 0:
raise PreventUpdate
return {"0": False, "1": True}
@app.callback(
Output("accordion", "state"),
Input("toggle", "n_clicks"),
State("accordion", "state"),
prevent_initial_call=True
)
def toggle(clicks, state):
state = state or {"0": False, "1": False}
if clicks == 0:
raise PreventUpdate
return {"0": False, "1": not state["1"]}
if __name__ == '__main__':
app.run_server(debug=True)
