Pattern Matching Callback Renders All Components When Adding New One
Nobody has claimed this yet.
- 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
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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