Manange "enter" event on button

Dash Python
13

Here are the advantages I see of using form elements combined with Dash supporting the submit event:

  1. We would be able to selectively target different groups of one or more form controls through Event callback triggers (as many different groups as you want for each callback). Assuming, of course, that the submit events can be associated with the ID of their enclosing form element.

  2. We would get native form validation which is supported by all modern browsers. For example, in the following layout fragment, the browser prevents you from submitting a form with inputs that are outside of the the range 10-20.

      html.Form(id="form", children=[
     dcc.Input(id="foo", type="number", min="10", max="20"),
     dcc.Input(id="submit", type="submit", value="Submit")
 ])

    Currently, we can’t take advantage of this validation with Dash. You still see the popup being triggered telling you that the input is invalid, but callbacks that are either listening for changes to the value attribute or click events (the only two methods we have available I think) will ignore this and fire anyway. There’s a range of attributes that can be used for validation, which Dash documents but, as far as I can tell, can’t use: https://plot.ly/dash/dash-core-components/input

  3. You would get the behaviour of triggering a callback on hitting the enter key (the motivating feature of this thread) for free, without even needing to explicitly support an enter keypress event. This is because when hitting enter in an input element, browsers will try to submit the enclosing form element. You wouldn’t even need to include a submit button. I’m pretty sure that the solution to your problem could just be solved with the following layout fragment, if you included an Event with ID foo_form and a State with ID foo in your callback:

    html.Form(dcc.Input(id="foo", type="text"), id="foo_form")

Even if another solution were to be canvased, such as supporting keypress events, why not add support for submit events anyway? Then those who want to use form elements can take advantage of these affordances.

What do you think @chriddyp?