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)
2 Likes

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.

1 Like

Can I revive this topic? Has this issue already been addressed in Dash, or is this on the road map to be addressed? Or are we dealing with an unsolvable problem?

The way I circumvent this problem is with the use of the dcc.store component. However this makes your callbacks and interactivity very clunky. I feel the logic would be much more streamlined if persistence would still work when values of components are updated via callbacks (since you can just use the persistence props instead of defining stores for each component)

3 Likes