@AnnMarieW Thats super helpful, replacing the None value with “” has worked and the dynamic features work as expected.
from dash import (
Dash,
html,
dcc,
Input,
Output,
State,
callback_context,
ALL,
MATCH,
no_update,
)
import dash_mantine_components as dmc
from dash.exceptions import PreventUpdate
dash._dash_renderer._set_react_version("18.2.0")
app = Dash(__name__)
# Sample IDs
_ids = ["id1", "id2", "id3"] # Example ids
def create_input_fields(id, values=""):
return html.Div(
[
dmc.NumberInput(
id={"type": "input", "id": id, "year": year},
placeholder=f"{id} Year {year}",
value=values[year - 1] if values else "",
min=0,
style={"width": "150px", "margin": "5px"},
)
for year in range(1, 6)
],
style={"margin-bottom": "10px"},
id={"type": "input-container", "id": id},
)
app.layout = html.Div(
[
dmc.MantineProvider(
children=[
# Input fields container
html.Div(
[create_input_fields(id) for id in _ids], id="inputs-container"
),
# Store for all data
dcc.Store(id="all-data-store"),
# Button container for reset buttons
html.Div(id="button-container"),
# Debug output for tracking changes
html.Div(id="debug-output"),
]
)
]
)
# Callback to update store and create reset buttons
@app.callback(
Output("all-data-store", "data"),
Output("button-container", "children"),
Input({"type": "input", "id": ALL, "year": ALL}, "value"),
)
def update_store_and_buttons(values):
ctx = callback_context
stores = {id: ["", "", "", "", ""] for id in _ids}
if ctx.inputs:
for i, value in enumerate(ctx.inputs_list[0]):
id = value["id"]["id"]
year = value["id"]["year"]
input_value = values[i]
stores[id][year - 1] = input_value
buttons = [
dmc.Button(f"Reset {id}", id={"type": "reset", "id": id})
for id, values in stores.items()
if any(v != "" for v in values)
]
return stores, buttons
@app.callback(
Output({"type": "input", "id": MATCH, "year": ALL}, "value"),
Input({"type": "reset", "id": MATCH}, "n_clicks"),
State({"type": "input", "id": MATCH, "year": ALL}, "id"),
prevent_initial_call=True,
)
def reset_inputs(n_clicks, input_ids):
if not n_clicks:
raise PreventUpdate
# Return None for all input fields to clear them
return [""] * len(input_ids)
# Debug callback to output current state
@app.callback(
Output("debug-output", "children"),
Input("all-data-store", "data"),
)
def debug_output(data):
return f"{data}"
if __name__ == "__main__":
app.run_server(debug=True)
