Dash - how to get callback to autorefresh with no button click?

Viewed 161

I have a few input forms on a dash callback which translate the inputs into a textual summary.

Right now, I have to click a button to refresh that textual summary, but I would like the refresh to be automatic - whenever the user edits the value in out of the input boxes instead.

I've tried changing the State variables into Input and getting rid of the reference to the button in callback input, but that hasn't helped - I still need to hit the button for the text to refresh.

Is there a way to make the textual summary refresh automatically, whenever user alters an input box?

@app.callback(
    Output('desc', 'children'),
    Input('submit-button-choose-event', 'n_clicks'),
    State("full-input-boxes", "children"),
             )
def refresh_desc(n_clicks,children):
    txt = ''
    if children:
        inputs = [i["props"] for i in children["props"]["children"] if i["type"] == "Input"]
        #process the inputs into txt
    return txt
1 Answers

Changing State to Input is the way to go, you need the input value of the component :

    @app.callback(
        Output('desc', 'children'),
        Input('full-input-boxes', 'value'))
    def refresh_desc(txt):
        # ...
        return txt

This works for the following input types : text, number, password, email, search.

Related