Use of debounce or how to get the input evaluated only after Enter

[viogp]

Hi,

I've looked to the documentation and didn't manage to do what I want: I have a box to enter text and I want to evaluate this text only after enter has been pressed (I don't want to evaluate while typing). It'll be even better if this evaluation is done after everytime Enter is press on that box. At the moment I get the following error, so clearly I'm not calling debounce properly (python 3.7.1, dash 0.35.1):

File "dash_layout.py", line 57, in <module>
    [Input(component_id='path2file-input',component_property='value',component_debounce=True)],
TypeError: __init__() got an unexpected keyword argument 'component_debounce'

Here is the code I have now:

@app.callback(Output(component_id='path2file-output',component_property='children'),
                [Input(component_id='path2file-input',component_property='value',component_debounce=True)],    
                [],
                [])
def path2file_callback(input_):
    global filename
    filename = input_
    return File_Info(filename)

And the messages:

def File_Info(filename):
    if (filename is None or filename == ""):
        return html.Div(
            id = 'path2file-output',
            children = [
                html.H5(
                    children=['No path to file has been input yet.'],
                    style={
                        'textAlign': 'center',
                        'color': colors['text'],
                        'fontFamily': 'Roboto Condensed',
                        'fontSize': '16',
                        'fontWeight': 'normal',
                    }
                ),
            ])
    else:
        problem, tester = test_file(filename)
        
        if problem:
            return html.Div(
                id = 'path2file-output',
                children = [
                    html.H5(
                        children=['There was an error processing ',filename],
                        style={
                            'textAlign': 'center',
                            'color': colors['text'],
                            'fontFamily': 'Roboto Condensed',
                            'fontSize': '16',
                            'fontWeight': 'normal',
                        }
                    ),
                ])
        else:
            return html.Div(
                id = 'path2file-output',
                children = [
                    html.H5(
                        children=['File: ',filename],
                        style={
                            'textAlign': 'center',
                            'color': colors['text'],
                            'fontFamily': 'Roboto Condensed',
                            'fontSize': '16',
                            'fontWeight': 'normal',
                        }
                    ),
                    html.H5(
                        children=['Tester type: ',tester],
                        style={
                            'textAlign': 'center',
                            'color': colors['text'],
                            'fontFamily': 'Roboto Condensed',
                            'fontSize': '16',
                            'fontWeight': 'normal',
                        }
                    ),
                ])

Thanks fo rany help!

[T4rk1n]

Input(component_id='path2file-input',component_property='value',component_debounce=True)

There's no component_debounce on callbacks Input, where did you get that ?

If you want to have a callback only when the user press enter on the dcc.Input you can use n_submit Input with a value State.

[viogp]

Hi, is one of the listed properties for Input:
https://dash.plot.ly/dash-core-components/input

I tried the example, but that does not wait for the Enter, it’s constantly updating. That’s also the behaviour of the example in the link above.

Could you maybe create an other example that only updates when Enter is pressed? Thanks!

[T4rk1n]

On the input docs page https://dash.plot.ly/dash-core-components/input

Update Value on Enter/Blur example use n_submit/n_blur

[viogp]

Thanks for your replys. I did try several things and they did not work, so could you elaborate a bit more in detail what you mean?

[T4rk1n]

This example:

# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    dcc.Input(id='input-1-submit', type='text', value='Montréal'),
    dcc.Input(id='input-2-submit', type='text', value='Canada'),
    html.Div(id='output-submit')
])


@app.callback(Output('output-submit', 'children'),
              [Input('input-1-submit', 'n_submit'), Input('input-1-submit', 'n_blur'),
               Input('input-2-submit', 'n_submit'), Input('input-2-submit', 'n_blur')],
              [State('input-1-submit', 'value'),
               State('input-2-submit', 'value')])
def update_output(ns1, nb1, ns2, nb2, input1, input2):
    return u'''
        Input 1 is "{}",
        and Input 2 is "{}"
    '''.format( input1, input2)


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

It uses the n_submit/n_blur prop of dcc.Input to only update when enter is pressed or the focus is lost.

[mazeenmuhammed]

app_dash = dash.Dash( external_stylesheets=[dbc.themes.BOOTSTRAP])
app_dash.layout = html.Div( [ 
    dcc.Input(id = "input" ,  placeholder = "enter key words", debounce =True, n_submit = 0 ),
    html.Br(),
    html.Div(id="output")
])
@app_dash.callback(Output(component_id='output', component_property='children'),
        [Input(component_id="input",component_property="value"),
        Input(component_id="input",component_property="n_submit")])
def input_field(value, n_submit):
    changed_id = [p['prop_id'] for p in dash.callback_context.triggered][0]
    if ("n_submit" in changed_id) & ((value is not None) or value!="" ):
        print("value is {}, submit is {}".format(value,n_submit))
        return  value
    else:
        print("last : value is {}, submit is {}".format(value, n_submit))
        raise PreventUpdate
app_dash.run_server()

This works only when enter is clicked and not when focus is lost. Hope this helps.

[ozendelait]

I think the cleanest way would be for your case to replace the Input with a State (which don't trigger upon change). So you can seperate the data ("value") from the event ("n_submit") e.g.:
[....]
@app_dash.callback(Output(component_id='output', component_property='children'),
[ Input(component_id="input",component_property="n_submit")],
State(component_id="input",component_property="value"))
def input_field(value, n_submit):
[...]

[gvwilson]

Hi - we are tidying up stale issues and PRs in Plotly's public repositories so that we can focus on things that are most important to our community. If this issue is still a concern, please add a comment letting us know what recent version of our software you've checked it with so that I can reopen it and add it to our backlog. (Please note that we will give priority to reports that include a short reproducible example.) If you'd like to submit a PR, we'd be happy to prioritize a review, and if it's a request for tech support, please post in our community forum. Thank you - @gvwilson