1

On IE11/React 15.1.0 when copy/paste data to a text field using right click on mouse, onChange is not firing, this works fine in Chrome and Firefox.

To resolve this I am using onBlur along with onChange with the input field but somehow I know its not the right approach.

<input name="username" onChange={this.props.updateName} 
       onBlur={this.props.updateName} id="username" />

I found a similar discussion on Github but the fix was made in later versions 15.6.0 but I can't update the version of React as it might break the app.

halfer
  • 19,824
  • 17
  • 99
  • 186
Peter
  • 10,492
  • 21
  • 82
  • 132

2 Answers2

3

Option 1:

Switch to React 15.6.2 (the last version of React 15.x), which doesn't have this problem on IE11; pasting via the mouse still triggers change:

ReactDOM.render(
  <div>
    <input
      text="text"
      onInput={() => {
        console.log("input");
      }}
      onChange={() => {
        console.log("change");
      }}
    />
  </div>,
  document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>

Option 2:

Respond to input instead of or in addition to change. As we can see here, 15.1.0 doesn't fire an onChange handler when you paste via the mouse on IE11:

ReactDOM.render(
  <div>
    <input
      text="text"
      onInput={() => {
        console.log("input");
      }}
      onChange={() => {
        console.log("change");
      }}
    />
  </div>,
  document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.1.0/react-dom.min.js"></script>

With the above, pasting with the mouse triggers only input on IE11.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • But onInput does not work on IE10. See the same here: https://stackoverflow.com/a/19067260/5346095. – Peter Jan 04 '18 at 09:43
  • @VishalGulati: IE10 has a global market share of three-quarters of one percent ([source](https://netmarketshare.com/browser-market-share.aspx?id=browsersDesktopVersions)), lower than IE9. There's no reason to support it. But if you want to, respond to both `onInput` **and** `onChange`. – T.J. Crowder Jan 04 '18 at 09:50
  • @VishalGulati: I've updated the answer, the most up-to-date version of React 15.x doesn't have this problem on IE11. – T.J. Crowder Jan 04 '18 at 10:00
  • Since I cant update react, I am left with option2. In that case should I use onInput or onBlur? Since onInput fires on all kind of activities but onBlur only when the field loses focus. Which I guess is sufficient for this scenario. Your thoughts on this please? – Peter Jan 04 '18 at 10:09
  • @VishalGulati: `change` will fire when the control loses focus after the paste (even on IE11), so there's no point in using `blur`. I would use `input`, so your model is always in sync with your view. But it depends. If you don't need the model to be in sync with the view when the control still has focus, just `change` is good enough. – T.J. Crowder Jan 04 '18 at 10:21
  • For me change does not fire even when I click out of the input field after pasting with right-click i.e. even when the control loses focus the change event is not getting fired. Thats why I resort to onBlur. – Peter Jan 04 '18 at 10:25
  • @VishalGulati: That's odd, it does for me with the above on IE11. But in any case, I'd use `input`, not `change` and `blur`. Your call, though, of course. – T.J. Crowder Jan 04 '18 at 10:30
  • Ok, thanks much for your inputs, will onInput be for sure able to catch all events alone? Or should I use it along with onChange? – Peter Jan 04 '18 at 10:35
  • @VishalGulati: I would combine `onInput` and `onChange`. React is *supposed* to fire `onChange` whenever the input value changes (even if the input has not lost focus) ([sketchy details here](https://reactjs.org/docs/dom-elements.html)), but clearly in v15.1.0 there's a bug in that. So I'd use `onInput` (to work around the bug) and `onChange` (just in case). – T.J. Crowder Jan 04 '18 at 11:17
0

I was facing different behaviour of onPaste in Chrome and IE11 in some scenarios onChange was getting called after onPaste event sometimes not.

React version 17.0.1

Below is my solution -

const [value, setValue] = useState("");

const callCommonOnchange = (v) => {
  // Do you in change operation to update input value
    setValue(v);
};
const handleChange = (e) => {
    callCommonOnchange(e.target.value);
};

const handlePaste = (e) => {
   //handle paste for some transformation
    If(condition)
        let paste = (e.clipboardData || window.clipboardData).getData("text");
        paste = paste.split("|").join(","); //transform your pasted content
        const selectionStart = e.target.selectionStart;

        const selectionEnd = e.target.selectionEnd;

        const currentValue = e.target.value;

        const startValue = currentValue.substring(0, selectionStart);
        const endValue = currentValue.substring(selectionEnd);

        callCommonOnchange(startValue + paste + endValue);
        e.preventDefault();
    else
        return;
};


return(
     <input value={value} onChange={handleChange} onPaste={handlePaste}/>
)
user1155773
  • 74
  • 1
  • 8