[TextField] Accept number as defaultValue

[doaboa]

Trying to use textfield as a number input, like so:

<TextField type='number' defaultValue={allowance.defaultQty} />

Where allowance.defaultQty is a number. It works, but I get this warning:

Warning: Failed propType: Invalid prop `defaultValue` of type `number` supplied to `TextField`, expected `string`. Check the render method of `BuildQuote`

Should TextField accept proptype number as a defaultValue, or is there a better alternative?

Thanks!

[alitaheri]

@doaboa Unfortunately TextField doesn't support numbers. We are trying to make TextField composable enough to support all sorts of inputs. but for now a work around would to control the TextField's value prop and don't accept non-numerical value (one you can't convert to number).

Try to tackle it a bit and if it proves to be hard, I'll provide an example for you.

[doaboa]

Thank you @subjectix!

This is actually fine for me functionally, I'm still able to set a min & max value (when using defaultValue instead of value), disable non-numeric characters, handle errors through snackbar and get number input arrows/selection on chrome, firefox, safari and ios. I'm wondering if there is something else unsupported that I'm not thinking of, hence the warning?

Lookin forward to #2416

[alitaheri]

@doaboa Actually, if you use the 0.14.0-rc1 version this issue has been resolved in #2365. The value prop now accepts any value, like defaultValue. But when the type is number, the arrows look ugly.

[newoga]

I can't say for sure, but I think one tricky thing about using <input type="number" /> is that the "arrows" on the number field are implemented by the browser and not styling. I think I remember that from another time I've worked with them.

At some point we might want to consider an input validator or something that can prevent input of characters based on a regex expression or something. That way we can ensure inputs look consist across value types. There are some other gotchas I'm sure but later we can investigate better approaches to handling this.