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)
The
Input
component can be cleared by setting the value toNone
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 sincemax=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 callsetProps
to setvalue=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 toNone
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.