Input with type="number" can't be cleared if value is invalid

[tcbegley]

The Input component can be cleared by setting the value to None in a callback. This doesn't work if the current value of the input is invalid.

Here's a simple example. On startup the Input contains a zero. Clicking the clear button clears the input. However, if you now type in an invalid input, e.g. 100 (invalid since max=10), the clear button will no longer clear the input.

I believe that this isn't possible to fix without changing the behaviour of Input when an invalid input is entered. Currently it will call setProps to set value=None. Since this is passed back into the component by dash-renderer it isn't possible to distinguish this from the user setting the value prop to None in a callback. In the former case you want to preserve the displayed value in the input, in the latter you want to clear it.

Personally I think it would kind of make sense for the input not to call setProps for any invalid inputs - if the input isn't valid, do you really want to trigger callbacks only for the callbacks to do input validation on the value?. I appreciate though that this would result in a breaking change in behaviour, and there may be other consequences I haven't considered.

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(
    [
        dcc.Input(id="input", type="number", max=10),
        html.Button("Clear", id="button"),
    ]
)


@app.callback(Output("input", "value"), Input("button", "n_clicks"))
def clear_button(n):
    if n:
        return None
    return 0


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