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.

Answer 1

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
),