DASH (by plotly-python) MATCH selector not working, while ALL selector working fine

Question

from dash import Dash, Input, Output, State, ALL, MATCH, ctx
from dash import html, dcc
import dash_mantine_components as dmc

app = Dash(__name__, prevent_initial_callbacks=True)

app.layout = \
html.Div(id='container', children=[
                dmc.Checkbox(id={'type': 'checkbox', 'index': 0}, label='My first to do', checked=False),
                html.Div(id='row5')])

@app.callback(Output('row5', 'children'),
    [Input({'type': 'checkbox', 'index': ALL}, 'checked')])
def set_update(*checked):
    return f"triggered_id is {ctx.triggered_id}, status is {checked}"

if __name__ == '__main__':
    app.run()

the above code is working fine as expected.

but if I change 'ALL' to 'MATCH' in the callback, the code is not working, this is no output in the div component after checking the checkbox

How to use 'MATCH' properly?

I am new to ``dmc`` but can you please explain the index parameter. Where can I read about its logic? Maybe I can help then. — Mike_H, Aug 31 '22 at 18:35
Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Community, Aug 31 '22 at 18:44
@Mike_H dmc is nothing but dash_mantime_componets , similar to dcc(dash_core_componets), id property of a component need not to be a string, it can be a dictionary, nothing special about index, it is just placeholder, you can read about it on https://dash.plotly.com/pattern-matching-callbacks — abhay patil, Aug 31 '22 at 19:20
Okay now I get it. Seems odd! Maybe post at the plotly community forum? — Mike_H, Aug 31 '22 at 19:51

score 0 · Answer 1 · answered Sep 02 '22 at 00:25

To correctly use MATCH you need to use a component which will have the same index and will be used as the output of the MATCH trigger in the callback.

Below is a sample code:

from dash import Dash, Input, Output, State, ALL, MATCH, ctx
from dash import html, dcc
import dash_mantine_components as dmc

app = Dash(__name__, prevent_initial_callbacks=True)

app.layout = html.Div(id='container', children=[
                dmc.Checkbox(id={'type': 'checkbox-test', 'index': 0}, label='My first to do', checked=False),
                dmc.Checkbox(id={'type': 'checkbox-test', 'index': 1}, label='My second to do', checked=False),
                html.Div(id={'type': 'output-test', 'index': 0}),
                html.Div(id={'type': 'output-test', 'index': 1})])

@app.callback(Output({'type': 'output-test', 'index': MATCH}, 'children'),
    Input({'type': 'checkbox-test', 'index': MATCH}, 'checked'))
def set_update(checked):
    return f"triggered_id is {ctx.triggered_id}, status is {checked}"

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

Also, I would like to suggest you use app.run_server(debug=True) so you can have some feedback about the errors you're receiving in your code; It will increase your productivity

DASH (by plotly-python) MATCH selector not working, while ALL selector working fine

1 Answers1