Auto-refresh upon clicking 'out' of a component.. Callback issue?

Dash Python
1

In my teams dash app, every time a user clicks into any “user-input” type of component (e.g., text input, number input, date picker, etc.) and then subsequently clicks out of that same component, the app will automatically refresh the page in the browser.

Example:

  1. To login to our app, our users are first asked to provide their email (by way of a dcc.Input component).
  2. After a user enters their email into the text box (i.e., dcc.input) and they attempt to click out of, or away from, the text box in any way, the page automatically refreshes on them.

It’s not a great user experience…

Anyone else experiencing this and/or have any workarounds? I’m new to dash app’s but am guessing it’s a callback issue…?

2

Hi @dani_m,

It all depends on how your callback is triggered. I would trigger the Input via a “submit” button and use the State() of the text input.

3

@AIMPED Hey, thanks for the quick response!
and ah, ok. any chance you’d be able to point me to a code example of that?

4

@dani_m sure:

import dash
from dash import html, dcc, Input, Output, State

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        html.Div(
            [
                dcc.Input(id=f'inp_{idx}', type='text') for idx in range(2)
            ]
        ),
        html.Button('submit', id='btn'),
        html.Div(id='out')
    ]
)


@app.callback(
    Output('out', 'children'),
    Input('btn', 'n_clicks'),
    [State(f'inp_{idx}', 'value') for idx in range(2)],
    prevent_initial_call=True
)
def sub(_, *values):
    first_input, second_input = values
    return f'{first_input}_____________{second_input}'


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