Losing control of <input type='number' />

[Enome]

http://jsfiddle.net/kb3gN/2498/

In the example above when you start typing numbers and then a non-number character it wont update the input field which is expected. If you start typing a non-number character first though it seems that the input field becomes uncontrolled and starts excepting anything you type and onChange isn't fired anymore.

[syranide]

Yeah, I've noticed when experimenting with raw type="number" fields that once it's not plain numbers, the value becomes "". I'll just go ahead and recommend my personal solution; throw everything but <input type="text"> and <textarea> out the window and implement them yourself. Less browser weirdness and you get to style it yourself.

[Enome]

@syranide yeah, that's what I am planning. The down side is that I lose the numeric keyboard on mobile devices though.

[jefffriesen]

For non-react apps, we've used this successfully:

<input type="text" pattern="[0-9]*" />

Here are some other options and some caveats: http://stackoverflow.com/questions/6178556/iphone-numeric-keyboard-for-text-input

I don't know if 'pattern' is supported by React though.

[syranide]

@jefffriesen It's supported :) Also, that's really good to know, thanks!

[gre]

Hi guys, I'm also falling in this bug, I still want to use the native input number (native controls and change events), is there any way I can make this working again?

Is this because React preventDefault for all events?
Should I bind on the input and handling the DOM myself?

Thanks

[syranide]

@gre Sorry, this is literally a "bug" in the DOM (or Chrome at least), it's impossible to read the actual value of the input when it is non-numeric.

[gre]

not sure to get what do you mean but

input.addEventListener("change", function (e) {
  var value = parseFloat(input.value, 10);
  ...
}, false);

works on Chrome.

as a proof I've used some here: https://glsl.io/transition/b6720916aa3f035949bc

<input type="number" step="0.1" />

[syranide]

@gre http://jsfiddle.net/44pnh/1/ try that in Chrome (it outputs below the input). As soon as you enter anything non-numeric, value becomes empty.

[gre]

So as I understand this Chrome behavior make it impossible to implement the sync in React?

I don't know what says the spec, but I'm not sure to get (1) what is functionally wrong with that behaviour (it is a number input so non-number values doesn't make sense – but yeah maybe Chrome shouldn't allow inputing invalid text),
and (2) how is that related to the initial bug which is that React disables the arrow controls (both from keyboard and from the UI).

If this Chrome "bug" is fixed, there is still a bug in React making the input number working right?

Anyway, as you recommended previously, I'm gonna implement my own number component then ;-)
Thanks

[syranide]

@gre Don't know the specifics, but I guess it's the same as with auto-fill, the browser simply doesn't tell us when the user makes changes. If it's possible to listen to up/down then, yeah, seems reasonable that we should to it (but listening to KeyDown, MouseDown, etc to accomplish it is fragile).

PS. My point was basically that it's already kind of bad, if you implement it yourself you could easily even prevent invalid chars from being typed (you can for number too ofc). But like with selects, styling is always going to be an issue. Seemingly, there is also always going to be obscure bugs/behaviors.

[markusk88]

A little late to the discussion, but I found an easy solution with some jquery magic.
If we modify the onChange to monitor for empty strings when the validity is false, we can manually set the input to value to ''

change: function (event) {
  if (event.target.validity.valid) {
      this.setState({ v: event.target.value });
  } else if (event.target.value == '') {
      $(this.getDOMNode()).val('');         
  }
}

http://jsfiddle.net/h6m3muhv/4/

[blainekasten]

Additionally, if you guys WANT the native numeric keyboard on mobile, you could wrap input in something like so:

class Input extends React.Component {
  render() {
    var type = navigator.userAgent.match(/Mobi/) && this.props.type === 'number' ? 'number' : 'text';

    return <input {...this.props} type={type} />
  }
}

or, react could do this if they dig the patch/hack.

[JeffOwOSun]

Here's my solution.

handleUpdate(e) {
  if (e.target.validity.valid) {
    //input is numeric
    this.setState({inputValue: e.target.value});
  } else if (e.target.value == '') {
    //input is not numeric
    this.numberInput.value = ''; //suppress UI change
    this.setState({inputValue: ''}); //reset state
  }
}

render() {
  return (
    ...
    <input type="number" value={this.state.inputValue} onChange={handleUpdate} 
      ref={elm=>{this.numberInput=elm}}/>{/*use ref to expose underlying dom node*/}
    ...
  )
}

the idea is from @markusk88, but my version doesn't use jQuery