Material-ui: [TextField] Support number input arrows

[seanrankin]

The browser vendor's implementations of the input type="number" are all over the board and are pretty disruptive to the design of the Material UI spec. If would be awesome to add number arrows that fit better with the aesthetic of MIU.

As far as I can tell, Google hasn't included this in the Material UI spec.

[mbrookes]

As always, PR welcome! :+1:

[chrismcv]

I think this provides an interesting challenge - and the composability of <TextField /> should probably be a pre-requisite.

Internally we're "fudging" TextField to be a bit more composable.

We've controls like <Integer /> <Decimal /> <Currency />, which we wrap in <Field /> which has a rather nasty implementation at present. i.e. <Integer /> is basically an <input type='number' /> with some custom events for keyboard/paste restriction.

We actually gave up with arrows, because they are non-materialy, but use <Popover /> with a <NumPad /> on mobile/tablet devices instead of the on screen keyboard to provide some quick entry.

[nathanmarks]

@chrismcv We should hold off on any TextField related features until the component has been reworked. It's got a number of issues at the moment which will only be exasperated by adding more features to it.

[chrismcv]

and the composability of should probably be a pre-requisite.

@nathanmarks that's what I meant!

[peisenmann]

I just had a need for this particular functionality and was wondering if there had been any progress on this, or if I should expect to roll my own? Thanks

[IssueHuntBot]

@rogerstorm funded this issue with $20. See it on IssueHunt

[eps1lon]

I tried to quickly throw something together but there's a lot of UI that needs to be styled manually. We need to:

• position the arrows properly
• make sure they don't steal focus from the input
• implement auto incrementing while holding the mouse down

They are probably not part of the Material guidelines since the input has no space to accommodate two buttons with a big enough hit target. The native ones on chrome are so tiny that I doubt any person actually uses them efficiently. Personally I would disable them with appearance: textfield and use some adornment to make it visually apparent that these are number inputs.