[BUG] Component as Props inserted by callbacks not found with dynamic inputs/outputs callbacks.

[CNFeffery]

Describe your context

dash                 2.6.2
dash-core-components 2.0.0
dash-html-components 2.0.0
dash-table           5.0.0

Describe the bug

When the component properties be updated, the added components won't trigger callback, only the initial components in the component properties work, for example:

import dash
import uuid
from dash import html, dcc
from dash.dependencies import Input, Output, State, MATCH

app = dash.Dash()

app.layout = html.Div(
    [
        html.Button(
            'add option',
            id='add-option',
            style={
                'marginBottom': '25px'
            }
        ),
        dcc.Checklist(
            [
                {
                    "label": [
                        html.Button(
                            'click me',
                            id={
                                'type': 'button',
                                'index': 0
                            }
                        ),
                        html.Span(
                            id={
                                'type': 'text',
                                'index': 0
                            }
                        )
                    ],
                    "value": 0,
                }
            ],
            id='options'
        )
    ],
    style={
        'padding': '50px'
    }
)


@app.callback(
    Output('options', 'options'),
    Input('add-option', 'n_clicks'),
    State('options', 'options'),
    prevent_initial_call=True
)
def add_option(n_clicks, options):

    new_uuid = str(uuid.uuid4())

    return [
        *options,
        {
            "label": [
                html.Button(
                    'click me',
                    id={
                        'type': 'button',
                        'index': new_uuid
                    },
                ),
                html.Span(
                    id={
                        'type': 'text',
                        'index': new_uuid
                    }
                )
            ],
            "value": new_uuid
        }
    ]


@app.callback(
    Output(
        {
            'type': 'text',
            'index': MATCH
        },
        'children'
    ),
    Input(
        {
            'type': 'button',
            'index': MATCH
        },
        'n_clicks'
    )
)
def demo(n_clicks):

    return n_clicks


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

Expected behavior

All components in the component properties should work as defined callback.

@chriddyp @alexcjohnson

[alexcjohnson]

Thanks @CNFeffery - here's a somewhat condensed version, showing that however many items are in the array originally (change n = 3 to whatever you want), those will trigger the callback but new ones will not. @T4rk1n over to you 🙏

import uuid
from dash import Dash, html, dcc, Input, Output, State, MATCH

app = Dash(__name__)

def opt(u):
    return {
        "label": [
            html.Button('click me', id={'type': 'button', 'index': u}),
            html.Span(id={'type': 'text', 'index': u})
        ],
        "value": u
    }

n = 3

app.layout = html.Div([
    html.Button('add option', id='add-option', style={'marginBottom': '25px'}),
    dcc.Checklist([opt(str(uuid.uuid4())) for i in range(n)], id='options')
], style={'padding': '50px'})

@app.callback(
    Output('options', 'options'),
    Input('add-option', 'n_clicks'),
    State('options', 'options'),
    prevent_initial_call=True
)
def add_option(_, options):
    return [*options, opt(str(uuid.uuid4()))]

@app.callback(
    Output({'type': 'text', 'index': MATCH}, 'children'),
    Input({'type': 'button', 'index': MATCH}, 'n_clicks')
)
def demo(n_clicks):
    return n_clicks

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