React: onChange not firing properly in React 15.2.0 + IE11 when paste text into textarea

[anggao]

Hello. On IE11/React 15.2.0 when copy/paste data from keyboard to a textarea, onChange not firing,
this works fine in Chrome and FF

I've included a test link:
https://jsfiddle.net/wxwawpkn/
(a log msg should happen when you copy/paste data into textarea)

Thanks!

[syranide]

cc @jquense @spicyj @jimfb mooore ;)

[anggao]

And I found it seems keyboard copy/paste sometimes trigger the event sometimes not, and right click then select paste always failed to trigger the event

[jquense]

gonna say its the same issue as the rest without having looked into it? did it work in 14, and does it work using master? That it works sometimes suggests that itas due to the polyfill needing focus of the inputs...I would think the context menu version steals focus?

[dhavalsoni2001]

@anggao I have seen fiddle shared by you. Instead of onChange() use onInput(). I have tested it and its working fine for me.

[anggao]

@dhavalsoni2001 Thanks ! onInput() did work, but according to the React doc:
https://facebook.github.io/react/docs/forms.html

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

[anggao]

@jquense I checked with 0.14.8 and it works:
https://jsfiddle.net/w76rqLea/

[anggao]

@dhavalsoni2001 just found onInput() won't work in IE9 :(

https://jsfiddle.net/L7vxr7yb/

[anggao]

And this issue seems only occurs in IE11

[nhunzaker]

This works correctly on master.

[KoenWillemse]

This issue is still present in version 15.3.0 when pasting with mouse: https://jsfiddle.net/pwy1xedh/
It does work when pasting with keyboard. Only IE 11 seems affected, Chrome and Edge work fine

[ksmithbaylor]

My team also verified this on 15.3.0 in IE11, but only when pasting with the mouse. Pasting with the keyboard works fine. We are using onInput instead now, as others have mentioned. Not sure if this is the right thing to do, but it's the only option until this gets fixed.

[timReynolds]

Is the suggested approach for this in the meantime to use onInput rather than onChange? I'd be interested to know the side effects of using onInput if anyone could point them out.

[dhavalsoni2001]

Checkout this answer I think it will helps to resolve issue. onInput and onChnage together

[kweiberth]

I am still able to reproduce this issue on IE11 and 15.4.1. Keyboard ctrl + V triggers onChange event. However, right-click mouse to paste does not trigger an onChange. After reading this thread, it seems like this was fixed in master, though still doesn't seem to be in a stable release. Any update on this? Thanks.

[CMTegner]

@kweiberth I can't find any related change on either master or 15-dev, so I don't think it's actually been fixed. Like you, I'm also able to reproduce the bug in IE11 on Windows 7 using React 15.4.1.

[kweiberth]

Yeah I'm not sure. Who should we ping to get a more definitive update on this?

[aweary]

I'm not sure what changes in master are supposed to have fixed (@nhunzaker do you know?)

You can try using the latest master builds available here to see if the issue is actually resolved in master. If it is, the changes may be part of a major release, but again I'm not clear on that yet.

[aweary]

It may be part of https://github.com/facebook/react/pull/5746 which is slated for 16.0

[jquense]

yup that fixes this ^^ and, as I noted a bunch of places, could be backported to v15 if anyone wanted to act on it.

[gaearon]

We're getting to a phase where we are unlikely to spend any effort on 15.x as we need to get Fiber to feature parity asap. I know this is frustrating and we're also looking for a way to spend more time on DOM issues in the future. But right now our focus is ensuring React continues to be relevant in the coming years, and we think Fiber is best shot at it. So I'm sorry this kind of stuff is slipping through the cracks.

[jquense]

First let me say that ya'll are great, and work super hard, thank you for everything. I totally understand the priorities of the team, however I think this illustrates that the team is not well resourced or structured to address a large section (majority?) of react's users. It's frustrating that "spending time on DOM issues" is a second order concern for a libraries whose main users are web developers.

It seems like the team moved on to focusing on just core without setting up or empowering another group to maintain and work on react-dom. I know there are plenty of folks here who would be more than happy to do that work (myself included) and have tried to do that work, but there is really little support, feedback or attention from the team, primarily because all DOM work is gated by review by the core team who doesn't have any time to spend doing that.

This is a great example, i've offered to do the work backporting the fix (which i wrote), but can't get a core dev to give some feedback without the conversation taking 6 months :(

[aweary]

I'd just like to say that I would be happy to work with anyone on keeping up with 15.x (including backporting #5746) while the core team continues focusing on Fiber. I don't want to overstate my position, but I am able to review + approve PRs and would be happy to work with others on getting fixes like this merged.

[jquense]

@Aweary i'm up for that. details in: https://github.com/facebook/react/pull/5746#issuecomment-242558132, but it may be worth having a quick chat. i'm generally on the react discord (monastic.panic) if you have time.

[nhunzaker]

I am very interested in this as well. I'm bad about not being on the discord app. I'll start logging on!

[gaearon]

We're going to chat about the plan for DOM maintenance in the next meeting, will keep you posted.

[Tanoemon]

Don't use onInput alternatively. It makes hard for typing language such as Japanese and Chinese. These languages are needed to select and convert typed characters to determine a word or a phrase. 'onInput' event sometimes happens to determine a word before finishing converting characters.

[Anahkiasen]

Any news on this one, seems still present on 15.4 for IE11. Also happens when typing fast into an input, some characters get lost along the way. onInput does fix it but as @Tanoemon mentioned it's not an ideal solution.

[AlexLandau]

As a workaround, I'm using onPaste in conjunction with onChange to catch these right-click pastes in IE11. Note that you need to use setTimeout for the handler to be run after the input text has been updated:

<input
    ...
    onChange={this.handleChange}
    onPaste={() => setTimeout(this.handleChange)}
    ...
/>

This may result in the handler running multiple times, so you should be careful with this approach if it's expensive or not idempotent.

[mbrookes]

The fix has now been backported into 15.6: https://github.com/facebook/react/pull/8575#issuecomment-302889646

[flarnie]

Closing this - should be fixed in 15.6. which we just released.

[VishalGulati]

@flarnie @aweary @mbrookes @gaearon By any chance is that possible to fix this in 15.1.0. I cant update the version unfortunately. I am using onBlur along with onChange for now.

[gaearon]

No, we can't fix something in an older minor.

[vaske]

I'm using React version 15.6.2 and I still have problem, mouse pasting doesn't trigger onChange event in IE11, I added work around to use onInput in such case, any idea what might be the case?

[ooip]

Any updates on this? We still have this issue with React 16.7.0.