1

A simple controlled input is not updating value based on user input when "onInput" is used as the listening event (in IE9/10). "onChange" works properly, but "onInput" has been selected as our event in order to solve for pasting values in IE11.

class TestComp extends React.Component {
  constructor(props){
    super(props);
    this.state = { value: "" };
    this.updateValue = this.updateValue.bind(this);
  }

  render(){
    return <input onInput={this.updateValue} value={this.state.value} />;
  }

  updateValue(evt){
    this.setState({ value: evt.target.value });
  }
};

https://codepen.io/anon/pen/KmJPGR

Is this an improper implementation of a controlled input? If yes, how can this be fixed? If no, what alternatives exist?

veratti
  • 560
  • 3
  • 10

1 Answers1

1

I would still use onChange although I cannot test it right now I've heard that onInput has some issues with IE9. According to React docs:

For <input> and <textarea>, onChange supersedes — and should generally be used instead of the DOM's built-in oninput event handler.

What about creating a fix for the onChange in IE11 instead of using other listener? A hack, although I don't recommend doing this, could probably be using onChange and onInput at the same time. Remember that Chrome will trigger both calls so I would recommend passing onInput only when userAgent matches.

I've also found this polyfill that fixes some of these issues (with deleting, clearing, cut the value) Couldn't test it, though: https://github.com/buzinas/ie9-oninput-polyfill.

Nahuel Jesús Sacchetti
  • 71
  • 5
  • 1
    Thanks for your answer. Your suggestion to go back to onChange is what I ended up going with yesterday, though a slightly different hack for IE11 pasting (https://stackoverflow.com/a/6902610/3669863). This is working for me :) – veratti May 24 '17 at 19:14