plotly / plotly/dash

Pattern Matching Callback Renders All Components When Adding New One

Open
#2,872 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug P3
Dominant language
Python
Stars
24.4k
Forks
2.3k
Avg merge
2d 7h
Merged PRs (30d)
13

Description

Describe your context
Please provide us your environment, so we can easily reproduce the issue.

dash                      2.13.0
dash-core-components      2.0.0
dash-enterprise-libraries 1.3.0
dash-html-components      2.0.0
dash_mantine_components   0.14.3
dash-table                5.0.0

Describe the bug

I'm using a sample app from the documentation that uses a pattern matching callback (MATCH). I added a dcc.Loading component, and the problem is that when I add a new pair of components, all the old components get refreshed too.

Expected behavior

When I add a new component, only the new component should be rendered.

Screenshots

logs

Code

from dash import Dash, dcc, html, Input, Output, State, MATCH, Patch, callback

app = Dash(__name__)

app.layout = html.Div([
    html.Button("Add Filter", id="dynamic-add-filter-btn", n_clicks=0),
    html.Div(id='dynamic-dropdown-container-div', children=[]),
])

@callback(
    Output('dynamic-dropdown-container-div', 'children'),
    Input('dynamic-add-filter-btn', 'n_clicks')
    )
def display_dropdowns(n_clicks):
    patched_children = Patch()
    new_element = html.Div([
        dcc.Dropdown(
            ['NYC', 'MTL', 'LA', 'TOKYO'],
            id={
                'type': 'city-dynamic-dropdown',
                'index': n_clicks
            }
        ),
        dcc.Loading(
            # id={"type": "file-loading", "index": idx},
            type="default",
            children=html.Div(
                id={
                    'type': 'city-dynamic-output',
                    'index': n_clicks
                }
        ))
    ])
    patched_children.append(new_element)
    return patched_children

@callback(
    Output({'type': 'city-dynamic-output', 'index': MATCH}, 'children'),
    Input({'type': 'city-dynamic-dropdown', 'index': MATCH}, 'value'),
    State({'type': 'city-dynamic-dropdown', 'index': MATCH}, 'id'),
)
def display_output(value, id):
    import time, random
    sleep_time = random.randint(1, 5)
    time.sleep(sleep_time)
    print(html.Div(f"Dropdown {id['index']} = {value}"))
    return html.Div(f"Dropdown {id['index']} = {value}")


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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the sample Dash app from the issue and observe the MATCH callback behavior when adding several component pairs. Compare rendering with and without dcc.Loading; done means adding a new component renders only that component while existing components are not refreshed.

Written by the indexing model from the issue text.

Assessment

Tech stack
python
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.