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 + IE11 when clearing input with X button or rightclick -> Delete #6822

Closed
soulostar opened this Issue May 20, 2016 · 8 comments

Comments

Projects
None yet
9 participants
@soulostar

soulostar commented May 20, 2016

The onChange event for inputs does not seem to be working correctly in React 15 when using the clear (X) button provided by IE (I'm using IE11). Clicking the clear button does not fire an immediate onChange at the time of click; rather, it seems that it "queues" an onChange that fires the next time text is entered, effectively rapid-firing two onChanges in succession. This becomes a problem when using a component that maps its state to two (or more, probably) inputs' values.

I made two fiddles with different versions of React and ReactDOM.
React 15 fiddle (buggy): https://jsfiddle.net/yde4wgaa/3/
React 0.14 fiddle (working): https://jsfiddle.net/f0tv528v/1/

In the React 15 fiddle, you can reproduce in IE11 by:

  1. typing a value into the left input box
  2. typing another value into the right input box
  3. clicking the X button to clear the right input box
  4. typing whatever in the left input box

You should see that the right input box reverts to its value before you clicked X. You can also see this happening if, instead of clicking X to clear the right input, you highlight the input text, right click, and click 'Delete'. Both the X button and right-click -> delete cases work fine with React 0.14 (tested both fiddles with the exact same browser and code).

@gaearon

This comment has been minimized.

Show comment
Hide comment
@gaearon

gaearon May 21, 2016

Member

@jquense, any ideas?

Member

gaearon commented May 21, 2016

@jquense, any ideas?

@jimfb

This comment has been minimized.

Show comment
Hide comment
@jimfb

jimfb Jun 15, 2016

Contributor

Ping @jquense

Contributor

jimfb commented Jun 15, 2016

Ping @jquense

@jquense

This comment has been minimized.

Show comment
Hide comment
@jquense

jquense Jun 15, 2016

Collaborator

same as the others I think, fires an onInput/onChange but not a propertychange event which is what the polyfill is looking for.

seems ie11 was serious about distancing itself from vendor features... can't believe I'm complaining about that :P should be fixed in master...still saying we could put that in 15 if we wanted...

Collaborator

jquense commented Jun 15, 2016

same as the others I think, fires an onInput/onChange but not a propertychange event which is what the polyfill is looking for.

seems ie11 was serious about distancing itself from vendor features... can't believe I'm complaining about that :P should be fixed in master...still saying we could put that in 15 if we wanted...

@dgreisen-cfpb

This comment has been minimized.

Show comment
Hide comment
@dgreisen-cfpb

dgreisen-cfpb Jul 1, 2016

This is a big bug for us. Do you know when this fix will be released? Need to decide whether to revert to 0.14. Thanks.

dgreisen-cfpb commented Jul 1, 2016

This is a big bug for us. Do you know when this fix will be released? Need to decide whether to revert to 0.14. Thanks.

@shaned24

This comment has been minimized.

Show comment
Hide comment
@shaned24

shaned24 Aug 3, 2016

To get around this issue for the time being I created a stateless component to use onInput instead of onChange for IE 11.

import React from 'react';
const attributeName = SomeDep.IsIE ? 'onInput' : 'onChange';

export const MyInput = ({ onChange, ...props }) => {
   props[attributeName] = onChange;
   return <input {...props}/>;
}

shaned24 commented Aug 3, 2016

To get around this issue for the time being I created a stateless component to use onInput instead of onChange for IE 11.

import React from 'react';
const attributeName = SomeDep.IsIE ? 'onInput' : 'onChange';

export const MyInput = ({ onChange, ...props }) => {
   props[attributeName] = onChange;
   return <input {...props}/>;
}
@scrooby

This comment has been minimized.

Show comment
Hide comment
@scrooby

scrooby Oct 6, 2016

Is there any update on when we can expect this fix to be released?

scrooby commented Oct 6, 2016

Is there any update on when we can expect this fix to be released?

@petermikitsh

This comment has been minimized.

Show comment
Hide comment
@petermikitsh

petermikitsh Oct 11, 2016

As a stopgap, I am hiding the clear input X's:

<style type='text/css' dangerouslySetInnerHTML={{__html: '::-ms-clear {display: none;}'}} />

petermikitsh commented Oct 11, 2016

As a stopgap, I am hiding the clear input X's:

<style type='text/css' dangerouslySetInnerHTML={{__html: '::-ms-clear {display: none;}'}} />

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

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)

This was referenced Dec 14, 2016

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)

flarnie added a commit to flarnie/react that referenced this issue Jun 7, 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)
@flarnie

This comment has been minimized.

Show comment
Hide comment
@flarnie

flarnie Jun 13, 2017

Contributor

This should be fixed in v15.6.0, which we released today.

Contributor

flarnie commented Jun 13, 2017

This should be fixed in v15.6.0, which we released today.

@flarnie flarnie closed this Jun 13, 2017

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