Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Problem with Numeric Input and Callback

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)

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

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!

This is coming in https://github.com/plotly/dash-core-components/pull/326!