Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

dcc.Input bug with decimal values #169

Closed
bperrenoud opened this issue Feb 26, 2018 · 7 comments

Comments

@bperrenoud
Copy link

commented Feb 26, 2018

when using the input component with numbers and with a callback

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div([
    dcc.Input(placeholder='Enter a value...',
        type='number',
        value=0,
        step=0.01,
        id='input_id',
        style={'float': 'left'}),
    html.Div(id='my-div')
])

@app.callback(
    Output(component_id='my-div', component_property='children'),
    [Input(component_id='input_id', component_property='value')]
)
def update_output_div(input_value):
    return 'You\'ve entered "{}"'.format(input_value)

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

Try entering decimal values with some 0s in the decimal part, for instance 0.001 or 4.1004:
When the callback is triggered, any ending 0 will be removed preventing you to finish writing the number

@chriddyp

This comment has been minimized.

Copy link
Member

commented Feb 26, 2018

Looks like this bug was added in #100 , here:

if (type === 'number') {
setProps({value: Number(e.target.value)});
}

For now, you can use type='text' and do the casting server-side in your dash app code

@pope1ni

This comment has been minimized.

Copy link
Contributor

commented Mar 8, 2018

I think the best solution here is to debounce onChange for dcc.Input().
This will allow the user to finish what they are typing before the event handler triggers.

@moorepants

This comment has been minimized.

Copy link

commented Mar 28, 2018

I agree with @pope1ni, the input boxes shouldn't send numbers to the server before the user has finished typing them. I'm having this trouble when entering multi digit numbers. For example, if I want to enter 20 manually, 2 gets sent to the server before I finish typing.

@steven-murray

This comment has been minimized.

Copy link

commented Aug 17, 2018

Any timeline for this being fixed? It is very annoying! I'd rather not do the casting server-side because it makes it harder to let the user know what went wrong to fix it.

@valentijnnieman

This comment has been minimized.

Copy link
Contributor

commented Nov 5, 2018

Version 0.37.0 now includes a new debounce prop on the input component, that when true, only sends back the data to the server upon 'Enter' or when losing focus. Hopefully this fixes the issues you've been having. I will close this issue now, assuming that the issue has been fixed. Thanks for your patience!

@vantaka2

This comment has been minimized.

Copy link

commented Apr 22, 2019

@valentijnnieman - Did .37 fix the issue? I'm using .38 and seeing this same bug.

@chriddyp

This comment has been minimized.

Copy link
Member

commented Apr 22, 2019

@vantaka2 - Would you mind creating a new issue with a small, reproducable example? debounce=True is indeed the way to go here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.