Material-ui: TextField type Number vs number

[AirborneEagle]

When using a textField there seems to be a difference between type: "Number" and type: "number
I could not find this in the documentation anywhere. (Maybe I missed something?)
What we were running into was if type: "number" then when the user would type a number there would remain a leading zero.
0 -> type number 5 -> value shows 05

when type: "Number"
0 -> type number 5 -> value shows 5

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

Steps to Reproduce 🕹

please see this sandbox
https://codesandbox.io/s/m4yk0n7kzy
click into the field. enter a number
you will see a leading 0.
change the type,
and the problem goes away.

Note:
I have not found that you can reproduce the problem by using the arrows.

| Material-UI | v3.5.1 |
| React | 16.4 |
| Browser | chrome |

it is possible that this was intended functionality, but I am doubtful, seeing that the arrows to not produce the same behavior.

[eps1lon]

If it's number then your browser will treat it as a number and not cast it to string.

If it's Number then it will fallback to text since Number is not a valid type and cast it to string. String(01) === "1"

[AirborneEagle]

@eps1lon Thank you for your quick reply.
That makes sense about casting to a string.

in my real app we are using redux. I have confirmed that when I type 1, then the TextField receives a value of 1, and yet there is still the leading 0.
can you explain where the 0 comes from?

Thank you for your help. And I am sorry if I am missing something simple. I may be looking to hard.

[joshwooding]

The fun happens when you add two inputs. One will start with a leading zero while editing it then the zero will disappear when you start editing the other

[oliviertassinari]

@AirborneEagle You get the same behavior with a native input. It's not Material-UI related. I would encourage you not to use Number in the feedback loop.

[AirborneEagle]

@joshwooding 😮
That is messed up.

@oliviertassinari I highly admire your work. Why should Number() not be used in the control/feedback loop?
Would it be better to do something like shown below?

So if I am understanding correctly, then I am simply need to implement my own workaround.
something like this?
(Plain text field, with a unary operation when setting the value to remove the leading 0)

      <TextField
        value={+numberValue}
        onChange={event => this.handleChange(event, "disc")}
        label="Broken Field?"
      />

I understand that this is not a Material-UI issue. But does anyone know why the native number field behaves that way?

[oliviertassinari]

@AirborneEagle I would encourage you to try StackOverflow out. We focus on issues with the library here :).