Unexplained callback behavior

Dash Python
,
10

What I dont understand is why this does not reproduce if move the button to have a shared parent DIV vs having it placed somewhere else. The callbacks do not change, the only thing that changes is there the output-txt DIV is moved

@AnnMarieW, @adamschroeder do you have any explanation as to why this occurs in this case?

THIS DOES NOT CAUSE CALLBACKS TO FIRE WHEN NEW ELEMENTS ADDED TO LAYOUT
gif2

def right_view(index):
    return html.Div([
    ])


def left_view(index):
    return html.Div([
        html.Button(f"Button {index}", id={"type": "action-btn", "index": index}, n_clicks=0, style={"height": "23px"}),
        html.Div(f"Triggered 0", id={"type": "output-txt", "index": index}, style={"height": "23px"})
    ])

THIS DOES CAUSE CALLBACKS TO FIRE WHEN NEW ELEMENTS ADDED TO LAYOUT
gif1

def right_view(index):
    return html.Div([
        html.Div(f"Triggered 0", id={"type": "output-txt", "index": index}, style={"height": "23px"})
    ])


def left_view(index):
    return html.Div([
        html.Button(f"Button {index}", id={"type": "action-btn", "index": index}, n_clicks=0, style={"height": "23px"}),
    ])

FULL CODE

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

app = Dash( __name__, suppress_callback_exceptions=True)

def right_view(index):
    return html.Div([
        # This causes callbacks to fire whenever added to the layout
        html.Div(f"Triggered 0", id={"type": "output-txt", "index": index}, style={"height": "23px"})
    ])


def left_view(index):
    return html.Div([
        html.Button(f"Button {index}", id={"type": "action-btn", "index": index}, n_clicks=0, style={"height": "23px"}),
        # Moving the div here does not cause the callbacks to fire when added to the layout
        # html.Div(f"Triggered 0", id={"type": "output-txt", "index": index}, style={"height": "23px"})
    ])

@app.callback(
    Output({"type": "output-txt", "index": MATCH}, "children"),
    Input({"type": "action-btn", "index": MATCH}, "n_clicks"),
    Input({"type": "output-txt", "index": MATCH}, "children"),
    prevent_initial_call=True
)
def inc_counter_for_view(clicks, triggered):
    return f"Triggered {int(triggered.split()[1]) + 1}"

app.layout = html.Div([
        html.Button("Add View", id="add-view"),
        dcc.Store("items-store", data=[], storage_type="memory"),

        html.Div([
            html.Div([], id="left", style={"display": "flex", "flex-direction": "column", "gap": "5px"}),
            html.Div([], id="right", style={"display": "flex", "flex-direction": "column", "gap": "5px"}),
    ],
    style={"display": "flex", "flex-direction": "row", "gap": "5px", "margin-top": "5px"}
        )]
)

app.clientside_callback(
    """
    function(data, left, right) {
        left.push(data.left)
        right.push(data.right)
        return [left, right]
    }
    """,
    Output("left", "children"),
    Output("right","children"),
    Input("items-store", "data"),
    State("left","children"),
    State("right","children"),
    prevent_initial_call=True
)

@app.callback(
    Output("items-store", "data"),
    Input("add-view", "n_clicks"),
    prevent_initial_call=True,
)
def add_view(index):
    return {
            "left": left_view(index),
            "right": right_view(index)
        }

app.run_server(debug=True)