Material-ui: [TextField] Leading zero not going away in TextField when type set to number

[nikolayhsu]

When the type of TextField is set to number and give it a initial value, once the entered number is deleted, the displayed value becomes 0. If you then enter another number, the zero will stay unless the page is refreshed.

I've checked the value received in the onChange function, which doesn't come with the leading zero.
If the 'value' attribute is not set, this issue won't occur.

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

If the entered number is deleted, it'd be better to not show the default 0 (as seen in Component Demos).
OR
Show the default 0, but remove it if the first digit entered is not 0.

Current Behavior

The leading zero won't go away.

Steps to Reproduce (for bugs)

1. Use a TextField and set type to number. Apply an onChange function.
2. In the browser, enter a number in the field, and remove it. You should see a zero now.
3. Enter another number. You shoud now see a the number with a leading zero.

Context

This behaviour is okay if the field is used for mobile number.
In the case where it's used for currency or quantity, it could be a bit confusing.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.12 |
| React | 15.0.0 |
| browser | Chrome Version 60.0.3112.113 |
| etc | |

[oliviertassinari]

I can't reproduce the behavior on the live demo. I'm not sure where you issue is coming from. Make sure the behavior isn't the same with a native input and provide a live reproduction example so we can have a look at it. For now. I'm closing. Thanks for your time.

[sersart]

I have same problem with 1.0.0-beta.40
If deposit is 0, it is showing 0, when you start type numbers 0 does not removes.
it is look like this 012345
<FormControl fullWidth={true} required={true}> <InputLabel htmlFor="deposits">Deposit</InputLabel> <Input id="deposits" name="deposits" type="number" value={Number(this.state.deposits)} onChange={this.handleDepositAmountChange} /> </FormControl>

Thanks for your time.

[oliviertassinari]

@sersart As far as I know, you will have the same behavior with a native input.

[sersart]

Yes, you correct. But in native input you can remove zero, before you typing. In this case we can not remove zero

[haraldreingruber]

I think the issue is a combination of converting the value to Number() and (as far as I observed the behavior) onChange is fired for every value change.

According to the HTML5 Spec this is actually the behavior of onInput, whereas onChange should only fire when the Input field loses focus. Would it be possible to have both callback options?

Update: binding onChange to the onInput DOM Event is apparently an inconsistency introduced by React....

[peterrogov]

Hi! I had the same issue. Managed to sort it out by converting the value from number to string and back.

TextField:

<TextField
    ...
    value={item.value.toString()}
    ...
/>

Handler:

...
value = parseInt(event.target.value);
...

This will eliminate leading zeros.

[FabianSellmann]

That is a general bug in react, as e.g: parseFloat('045') === parseFloat('45') the dom input value is not updated. See https://github.com/facebook/react/issues/9402

[harshit98]

@peterrogov Your solution is amazing! 🎉

[Abekonge]

If you have floating numbers, @peterrogov's solution will work, but use Number(event.target.value) instead of parseInt