Problem with Numeric Input and Callback

Dash Python
1

I am using an Input Component for numeric input but when I use that component as an input to a callback, problems occur when entering decimal numbers. The Input won’t allow an entry of a zero digit to the right of the decimal point (Try entering 0.01 in the example below). Other oddities occur. Entry is fine when the callback is disabled. Here is code demo’ing the problem:

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

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

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

app.layout = html.Div(children=[
    html.H1(children='Input Component Bug'),
    html.P([
        'Try to Enter a Fractional Number like 0.01: ', 
        dcc.Input(id='number-input', type='number', inputmode='numeric')
    ]),
    html.P([
        'Mirrored Input: ', 
        html.Span(id='mirrored-number')
    ])
    
])

@app.callback(
    Output(component_id='mirrored-number', component_property='children'),
    [Input(component_id='number-input', component_property='value')]
)
def update_output_div(num):
    return num


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

For now, I’d keep type='text' and then parse the number in your callback (num = float(num)). There is an issue here: https://github.com/plotly/dash-core-components/issues/169

3

That was my backup plan. I read through the issue, and I too would prefer to have the callback triggered with onBlur instead of every keystroke. Hope the fix is coming. Very nice work overall with the product, though! Thank you!

4

This is coming in Add `n_blur/n_submit` to Input. by T4rk1n · Pull Request #326 · plotly/dash-core-components · GitHub!