How do I give a delay in user input to a Textbox in a dash app?

Question

I am learning to build a simple dash app. It has a textbox for user input, depending on which it will draw a graph.

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

app = dash.Dash()

app.layout = html.Div(children=[
    html.Div(children='User input:'),
    dcc.Input(id='input', value='', type='text'),
    html.Div(id='output-graph'),
])

@app.callback(
    Output(component_id='output-graph', component_property='children'),
    [Input(component_id='input', component_property='value')]
)
def update_value(input_data):
    return dcc.Graph(
    ### Do something ###
    )

The problem is, since dash uses react in the background, it keeps throwing errors in the console whenever the input is being entered until it reaches a valid input. For example, if I am plotting stock prices for a stock symbol (say, AAPL), it throws an error after typing each of the letters until typing all 4 valid letters.

I would like to add a delay of, say, 1 sec after the user inputs the last character before the app tries to read the input. How do I do that? I have been searching online about this, but can't find anything.

Also, if the input after the 1-sec delay is an invalid input (like, AAPF instead of AAPL, for instance), it should return something like, Wrong input, please enter again.

I played around with this trying to get something working with asyncio, but to no avail. If I had more time I'd try to get something going with `dcc.Interval`, but would have to give it some more thought. This might help getting asyncio working https://github.com/ned2/dash/blob/support-quart/dash/async.py — cosmic_inquiry, Oct 04 '18 at 06:06
did you tried to use time.sleep(t) ? just before the update_value — C.med, Oct 04 '18 at 12:10

score 7 · Answer 1 · answered Feb 14 '20 at 02:58

7

Old question, but I came across it while searching for the same thing. I subsequently found on the plotly forums that the debounce keyword parameter was added to the dash core components (as of version 0.35.0.). If debounce is True, then the contents of the input will not be communicated until the user presses enter or clicks out of the box.

For example:

dcc.Input(
    id='user-input',
    type='number',
    value=30,            
    style={'fontSize':28},
    debounce = True
),

answered Feb 14 '20 at 02:58

chris

1,267
7
20

Cool. I solved the issue by using an if-else. If the input is empty, then `dash.no_update()`, else `code`. – Kristada673 Feb 14 '20 at 15:49
In case someone is looking for a similar solution but with `dcc.TextArea`, try using `n_blur` as an `Input` and `value` as `State`. Source: https://community.plotly.com/t/debounce-dcc-textarea/29471/2 – Shovalt Dec 30 '20 at 16:41

How do I give a delay in user input to a Textbox in a dash app?

1 Answers1