Input with type number returning unicode after first value change

[P-Tillmann]

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?

[ned2]

From reading through the MDN webdocs, setting <input type="number"> 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:

Note: It's crucial to remember that a user can tinker with your HTML behind the scenes, so your site must not use simple client-side validation for any security purposes. You must verify on the server side any transaction in which the provided value may have any security implications of any kind.

So I for one think that it's reasonable to require explicit conversion to integers within Dash callbacks.

[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 👍

[ned2]

That's a good point, about initial values being supplied as ints, but coming back as strings in the callbacks. I guess it would never be unhelpful to convert into an int in this case.

[P-Tillmann]

I have to admit that I'm a little bit confused.
Do you want to change the behaviour so that the Input gives back a string even in the initial callback run when the value is initialised as a float or int (for consistency)?
Or do you want the callback of the input to return a number when the type is set to number?

[P-Tillmann]

@ned2 @chriddyp

[chriddyp]

Or do you want the callback of the input to return a number when the type is set to number?

This

[Madhu94]

Is someone working on this @P-Tillmann @ned2 @chriddyp ? I'd like to give it a shot.

[P-Tillmann]

@Madhu94 I tried to do something here but i didn't even got the build process for dash-core-components running. I think everyone would be glad if you came up with a pr.

[chriddyp]

I'm not working on this right now. Go for it @Madhu94 ! Happy to lend a hand if you need help getting started.

[Madhu94]

Cool! Thanks @chriddyp