New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
anggao opened this Issue Jul 7, 2016 · 33 comments

Comments

Projects
None yet
@anggao

anggao commented Jul 7, 2016

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

This comment has been minimized.

Show comment
Hide comment
@syranide

syranide Jul 7, 2016

Contributor

cc @jquense @spicyj @jimfb mooore ;)

Contributor

syranide commented Jul 7, 2016

cc @jquense @spicyj @jimfb mooore ;)

@anggao

This comment has been minimized.

Show comment
Hide comment
@anggao

anggao Jul 7, 2016

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

anggao commented Jul 7, 2016

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

This comment has been minimized.

Show comment
Hide comment
@jquense

jquense Jul 8, 2016

Collaborator

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?

Collaborator

jquense commented Jul 8, 2016

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

This comment has been minimized.

Show comment
Hide comment
@dhavalsoni2001

dhavalsoni2001 Jul 9, 2016

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

dhavalsoni2001 commented Jul 9, 2016

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

@anggao

This comment has been minimized.

Show comment
Hide comment
@anggao

anggao Jul 11, 2016

@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 commented Jul 11, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@anggao

anggao Jul 11, 2016

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

anggao commented Jul 11, 2016

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

@anggao

This comment has been minimized.

Show comment
Hide comment
@anggao

anggao Jul 20, 2016

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

https://jsfiddle.net/L7vxr7yb/

anggao commented Jul 20, 2016

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

https://jsfiddle.net/L7vxr7yb/

@anggao

This comment has been minimized.

Show comment
Hide comment
@anggao

anggao Jul 21, 2016

And this issue seems only occurs in IE11

anggao commented Jul 21, 2016

And this issue seems only occurs in IE11

@nhunzaker

This comment has been minimized.

Show comment
Hide comment
@nhunzaker

nhunzaker Jul 23, 2016

Collaborator

This works correctly on master.

Collaborator

nhunzaker commented Jul 23, 2016

This works correctly on master.

@KoenWillemse

This comment has been minimized.

Show comment
Hide comment
@KoenWillemse

KoenWillemse Sep 6, 2016

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

KoenWillemse commented Sep 6, 2016

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

This comment has been minimized.

Show comment
Hide comment
@ksmithbaylor

ksmithbaylor Sep 9, 2016

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.

ksmithbaylor commented Sep 9, 2016

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

This comment has been minimized.

Show comment
Hide comment
@timReynolds

timReynolds Sep 16, 2016

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.

timReynolds commented Sep 16, 2016

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

This comment has been minimized.

Show comment
Hide comment
@dhavalsoni2001

dhavalsoni2001 Sep 17, 2016

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

dhavalsoni2001 commented Sep 17, 2016

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

olmobrutall added a commit to signumsoftware/framework that referenced this issue Sep 27, 2016

@kweiberth

This comment has been minimized.

Show comment
Hide comment
@kweiberth

kweiberth Nov 30, 2016

Contributor

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.

Contributor

kweiberth commented Nov 30, 2016

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

This comment has been minimized.

Show comment
Hide comment
@CMTegner

CMTegner Dec 12, 2016

@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.

CMTegner commented Dec 12, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@kweiberth

kweiberth Dec 13, 2016

Contributor

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

Contributor

kweiberth commented Dec 13, 2016

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

@aweary

This comment has been minimized.

Show comment
Hide comment
@aweary

aweary Dec 13, 2016

Member

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.

Member

aweary commented Dec 13, 2016

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

This comment has been minimized.

Show comment
Hide comment
@aweary

aweary Dec 13, 2016

Member

It may be part of #5746 which is slated for 16.0

Member

aweary commented Dec 13, 2016

It may be part of #5746 which is slated for 16.0

@jquense

This comment has been minimized.

Show comment
Hide comment
@jquense

jquense Dec 13, 2016

Collaborator

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

Collaborator

jquense commented Dec 13, 2016

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

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Dec 13, 2016

Member

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.

Member

gaearon commented Dec 13, 2016

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

This comment has been minimized.

Show comment
Hide comment
@jquense

jquense Dec 13, 2016

Collaborator

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 :(

Collaborator

jquense commented Dec 13, 2016

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

This comment has been minimized.

Show comment
Hide comment
@aweary

aweary Dec 13, 2016

Member

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.

Member

aweary commented Dec 13, 2016

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

This comment has been minimized.

Show comment
Hide comment
@jquense

jquense Dec 13, 2016

Collaborator

@aweary i'm up for that. details in: #5746 (comment), but it may be worth having a quick chat. i'm generally on the react discord (monastic.panic) if you have time.

Collaborator

jquense commented Dec 13, 2016

@aweary i'm up for that. details in: #5746 (comment), but it may be worth having a quick chat. i'm generally on the react discord (monastic.panic) if you have time.

@nhunzaker

This comment has been minimized.

Show comment
Hide comment
@nhunzaker

nhunzaker Dec 13, 2016

Collaborator

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

Collaborator

nhunzaker commented Dec 13, 2016

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

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Dec 13, 2016

Member

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

Member

gaearon commented Dec 13, 2016

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

jquense added a commit to jquense/react that referenced this issue Dec 14, 2016

Allow simulated native events to propagate
fixes facebook#7211 fixes facebook#6822 fixes facebook#6614

we should make sure it doesn't break facebook#3926 any worse (or works with facebook#8438)

This was referenced Dec 14, 2016

@salmankhann salmankhann referenced this issue Feb 16, 2017

Closed

React 16 Umbrella ☂️ (and 15.5) #8854

117 of 120 tasks complete
@Tanoemon

This comment has been minimized.

Show comment
Hide comment
@Tanoemon

Tanoemon Mar 16, 2017

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.

Tanoemon commented Mar 16, 2017

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

This comment has been minimized.

Show comment
Hide comment
@Anahkiasen

Anahkiasen Apr 20, 2017

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.

Anahkiasen commented Apr 20, 2017

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.

olmobrutall pushed a commit to signumsoftware/framework that referenced this issue Apr 27, 2017

@AlexLandau

This comment has been minimized.

Show comment
Hide comment
@AlexLandau

AlexLandau Apr 27, 2017

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.

AlexLandau commented Apr 27, 2017

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.

flarnie added a commit that referenced this issue May 20, 2017

Backport input fix (#8575)
* Only fire input value change events when the value changes (#5746)

* Allow simulated native events to propagate

fixes #7211 fixes #6822 fixes #6614

we should make sure it doesn't break #3926 any worse (or works with #8438)
@mbrookes

This comment has been minimized.

Show comment
Hide comment
@mbrookes

mbrookes May 25, 2017

Contributor

The fix has now been backported into 15.6: #8575 (comment)

Contributor

mbrookes commented May 25, 2017

The fix has now been backported into 15.6: #8575 (comment)

flarnie added a commit to flarnie/react that referenced this issue Jun 7, 2017

Backport input fix (facebook#8575)
* Only fire input value change events when the value changes (facebook#5746)

* Allow simulated native events to propagate

fixes facebook#7211 fixes facebook#6822 fixes facebook#6614

we should make sure it doesn't break facebook#3926 any worse (or works with facebook#8438)
@flarnie

This comment has been minimized.

Show comment
Hide comment
@flarnie

flarnie Jun 13, 2017

Contributor

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

Contributor

flarnie commented Jun 13, 2017

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

@flarnie flarnie closed this Jun 13, 2017

@VishalGulati

This comment has been minimized.

Show comment
Hide comment
@VishalGulati

VishalGulati Jan 3, 2018

@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.

VishalGulati commented Jan 3, 2018

@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

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon Jan 5, 2018

Member

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

Member

gaearon commented Jan 5, 2018

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

@vaske

This comment has been minimized.

Show comment
Hide comment
@vaske

vaske Sep 21, 2018

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?

vaske commented Sep 21, 2018

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment