💸 Reduce costs by consolidating proprietary analytics & reporting software to open-source & Dash.
Challenge us to replace your analytics with Dash and reduce costs.

Losing persistence value on refresh when input value updated using callback

Hi, I have an app where I need to load a value into an Input in some scenarios, but allow the user to update the input in other scenarios. When I use code to set the value the persistence does not work (ie when refreshing I lose the value), even though persistence is set to ‘local’. If the user inputs the value then the persistence does work (ie when refreshing the value remains).

Is there a solution to get persistence working when code sets the input value?

Please see sample code below.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Button(id='test-button', children='Load Test Data'),
    dcc.Input(id='test-input', debounce=True, persistence=True,  persistence_type='local')
])

@app.callback(
    Output('test-input', 'value'),
    [Input('test-button', 'n_clicks')])
def update_input_value(n_clicks):
    if dash.callback_context.triggered[0]['prop_id'].split('.')[0] == 'test-button':
        return 'Button Clicked'
    else:
        raise PreventUpdate

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

I think this may be related to the below post also:

More detail on the potential problem:

I’m not familiar with the workings of React so I’d be really happy if anyone can shed any light on whether there is a workaround for this, or if there isn’t and I should build my app with that in mind.