Input with type number returning unicode after first value change

Hi,

i stumbled across a problem when i wanted to use numeric input to change something in my dash app. It seems that for an dcc.Input of type number the value that is handed to the callback function is not a float but a unicode string.

The following code should clarify the problem as soon as you change a value in the browser:

#!/usr/bin/env python2
# -*- coding: utf-8 -*-

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(children=[
    html.H1(children='Hello Dash'),
    dcc.Input(id='input_1', value=0.7, type="number"),
    dcc.Input(id='input_2', value=0.7, type="number"),
    html.Div(id='typeof_1'),
    html.Div(id='typeof_2'),
    html.Div(id='display_sum'),
    ]
)
@app.callback(
    Output('typeof_1', 'children'),
    [Input('input_1', 'value')]
)
def update_output_div(input_value1):
    return 'type of input 1"{}"'.format(type(input_value1))
  
@app.callback(
    Output('typeof_2', 'children'),
    [Input('input_2', 'value')]
)
def update_output_div2(input_value2):
    return 'type of input 2"{}"'.format(type(input_value2))


@app.callback(
    Output('display_sum', 'children'),
    [Input('input_1', 'value'),
     Input('input_2', 'value'),]
)
def update_output_div3(input_value1, input_value2):
    return 'sum "{}"'.format(input_value1+input_value2)

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

I guess the problem is that the Input is just always treated as a string no matter what type you choose. Is this something i have to live with or would you consider this a bug that should be fixed?

[chriddyp]

I do think that the implicit type casting is confusing. The user will most likely set the value to a number, only to find it being returned as a string (Input(value=0.7)).

has the result of giving you automatic client-side validation that the input is a number and possibly other enhancements such as increment buttons, but is only intended as a convenience for client-side development

That’s right - We’re just using the default behaviour right now: https://github.com/plotly/dash-core-components/blob/master/src/components/Input.react.js#L28-L43

Fixing this wouldn’t be too tough, I’m in favor of it 👍

[Madhu94]

Cool! Thanks @chriddyp