Fix IE9 Undo Bug #12505

nhunzaker · 2018-03-31T13:57:16Z

This commit fixes a case where IE9 raises an exception if modifying a detached text node.

This is reproducible with the following steps:

Open http://react-dom-ie9-undo.surge.sh/text-inputs?version=16.3.0 in IE9
Scroll to the "Bubbled Change Events" fixture
Change the text in input
Start debugging in the IE9 developer tools
Press ctrl+z to undo your text change
IE9 raises an exception when setting the nodeValue of the text label to the right of the input "invalid arguments".

The "local" build for that branch addresses the issue by removing a subscription to onpropertychange unique to IE9, which avoids a forced batch update that appears to be the root of the problem.

Fixes #11609

nhunzaker · 2018-03-31T13:58:20Z

fixtures/dom/src/components/fixtures/number-inputs/NumberTestCase.js

@@ -5,7 +5,7 @@ const React = window.React;
 class NumberTestCase extends React.Component {
  state = {value: ''};
  onChange = event => {
-    const parsed = parseFloat(event.target.value, 10);
+    const parsed = parseFloat(event.currentTarget.value, 10);


event.target was always the window in IE9. That seems like a bug too. I'm planning to investigate.

Filed here: #12506. Pretty strange, I can't reproduce this outside of the test fixtures.

jquense · 2018-03-31T14:15:30Z

packages/react-dom/src/client/ReactDOM.js

+      // eslint-disable-next-line
+      // https://connect.microsoft.com/IE/feedbackdetail/view/944330/invalid-argument-error-when-changing-nodevalue-of-a-text-node-removed-by-setting-innerhtml-on-an-ancestor
+      if (textInstance.parentNode) {
+        textInstance.nodeValue = newText;


The link is dead for me. Does accessing parentNode have an undue reflow effects? I don't have any reason to think it does but the DOM is weird :P

Microsoft Connect has been retired

sigh. I'll try to find it again...

Does this actually fix the undo behavior, or just stop it from throwing? Since we're not setting nodeValue I'd expect the behavior to still be broken, no?

It just stops it from throwing. I haven't been able to determine if react is incorrectly updating stale nodes and IE9 is just less lenient, or if this is specific to IE9.

I can dig in a bit more.

I noticed recently that it's possible for Fibers to retain references to detached nodes. I wonder if this is potentially related? Does this issue occur in React 15.x?

Dunno if it helps: #12420 (comment)

Back to the link issue. I'm having trouble digging up more information. For now, I've removed the link. I think the remaining comment is still sufficient.

nhunzaker · 2018-04-16T11:57:55Z

What is a good next step here? My primary motivation is avoiding a problematic exception. Should we/I investigate further why React is trying to update a text node that has no parent?

gaearon · 2018-04-16T13:25:02Z

Should we/I investigate further why React is trying to update a text node that has no parent?

This sounds like a good idea to me, I think? I wouldn't expect that.

Regarding the PR, I'm not a fan of putting an extra check relevant only to IE9 in a super hot path for text updates. We should understand more first.

nhunzaker · 2018-06-02T19:56:50Z

Huh. Catching up on this, looks like this works outside of react:

https://codepen.io/nhunzaker/pen/Lrpqov?editors=1010

At the very least, undoing text doesn't break in the same way.

nhunzaker · 2018-06-04T11:48:10Z

I've been able to narrow this down to the following code:

react/packages/react-dom/src/events/ChangeEventPlugin.js

Lines 80 to 99 in 36546b5

    
           function manualDispatchChangeEvent(nativeEvent) { 
        
             const event = createAndAccumulateChangeEvent( 
        
               activeElementInst, 
        
               nativeEvent, 
        
               getEventTarget(nativeEvent), 
        
             ); 
        
             // If change and propertychange bubbled, we'd just bind to it like all the 
        
             // other events and have it go through ReactBrowserEventEmitter. Since it 
        
             // doesn't, we manually listen for the events and so we have to enqueue and 
        
             // process the abstract event manually. 
        
             // 
        
             // Batching is necessary here in order to ensure that all event handlers run 
        
             // before the next rerender (including event handlers attached to ancestor 
        
             // elements instead of directly on the input). Without this, controlled 
        
             // components don't work properly in conjunction with event bubbling because 
        
             // the component is rerendered and the value reverted before all the event 
        
             // handlers can run. See https://github.com/facebook/react/issues/708. 
        
             batchedUpdates(runEventInBatch, event); 
        
           }

When this code runs, it results in a new text node in IE9.

Doing some quick testing, I actually don't think this line is necessary. I'll make a manual test fixture and confirm.

nhunzaker · 2018-06-04T11:56:16Z

fixtures/dom/src/components/fixtures/text-inputs/BubbledInputTestCase.js

+
+  onChange = event => {
+    this.setState({
+      value: (event.srcElement || event.target).value,


We need this until #12976 lands

nhunzaker · 2018-06-04T11:57:56Z

packages/react-dom/src/events/ChangeEventPlugin.js

-    manualDispatchChangeEvent(nativeEvent);
-  }
-}
-


@jquense As far as I can test, this behavior is no longer necessary. Do you know what conditions onpropertychange is covering?

@sophiebits original blog post on this is my primary text on the subject :P https://sophiebits.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html

I think you are right, I was reticent to yank it all out out of an abundance of caution, but it should be ok to remove (as well as the keyup and down handlers with selectionchange below)

Before this commit, IE9 would force a change event to fire when the onpropertychange callback fired. This threw an error when undoing text changes: React would try to update a text node that was detached from the DOM.

nhunzaker · 2018-06-04T12:05:52Z

Okay, I think I have it! Things look good so far, but I'd like to do a more comprehensive sweep if we're able to merge #12976. It fixes the event target for inputs in IE9, making testing easier.

sophiebits · 2018-06-04T15:21:43Z

packages/react-dom/src/events/ChangeEventPlugin.js

-  // components don't work properly in conjunction with event bubbling because
-  // the component is rerendered and the value reverted before all the event
-  // handlers can run. See https://github.com/facebook/react/issues/708.
-  batchedUpdates(runEventInBatch, event);


This code dispatches a change event; it doesn't do anything by itself. Can we figure out why this was breaking?

I don't really feel comfortable removing this logic until we understand why it's buggy.

Totally, 👍

As far as I can tell, this code executes correctly. I believe the issue is a difference in browser behavior when using attachEvent vs addEventListener. The following code snippet seems to demonstrate what is happening:

Try this in IE9:
https://s.codepen.io/nhunzaker/debug/Lrpqov/ZoABaKanBoKr

Browse the code:
https://codepen.io/nhunzaker/pen/Lrpqov

It looks like IE9, when using attachEvent for text input, causes previously referenced text nodes to be replaced with a copy. This behavior doesn't present itself if you use addEventListener.

I think we were able to get away with this before (but I'm not super familiar) because we identified text via an embedded span, and then eventually relative to a comment.

This is... probably the strangest DOM thing I have seen. I would love a second/third opinion here.

wouldn't the onInput event catch that as well? Or does it not fire in that case for ie9?

According to MDN:

IE 9 does not fire an input event when the user deletes characters from an input (e.g. by pressing Backspace or Delete, or using the "Cut" operation).

https://developer.mozilla.org/en-US/docs/Web/Events/input (footnote 2)

right, deleting doesn't work, we have the selectionchange and various key events to catch those cases tho (that is the intent anyway)

Right, right I thought you were asking about input events with onInput, but you were probably talking about our polyfilled version :)

I wonder if we could catch some of these edge cases by comparing the value on focus:

https://github.com/facebook/react/blob/master/packages/react-dom/src/events/ChangeEventPlugin.js#L135-L139

I'm not sure what to do about "Cut", though I can't help but wonder if it triggers a selection change (you have text selected, you cut, and thus, the words disappear and selection changes).

facebook-github-bot · 2018-06-29T01:26:51Z

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

facebook-github-bot · 2018-06-29T02:06:57Z

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

stale · 2020-01-10T08:52:54Z

This pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

stale · 2020-01-17T08:58:45Z

Closing this pull request after a prolonged period of inactivity. If this issue is still present in the latest release, please ask for this pull request to be reopened. Thank you!

nhunzaker mentioned this pull request Mar 31, 2018

Undo operation on text input throws exception in IE9 #11609

Closed

facebook-github-bot added the CLA Signed label Mar 31, 2018

nhunzaker commented Mar 31, 2018

View reviewed changes

jquense reviewed Mar 31, 2018

View reviewed changes

nhunzaker force-pushed the fix-ie9-undo branch from ec63def to af5650b Compare April 16, 2018 11:44

nhunzaker force-pushed the fix-ie9-undo branch from af5650b to 5f58a9c Compare June 4, 2018 11:55

nhunzaker commented Jun 4, 2018

View reviewed changes

nhunzaker changed the title ~~Add guard around commitTextValue to avoid IE9 undo bug~~ Fix IE9 Undo Bug Jun 4, 2018

Remove forced bubble code to prevent undo errors in IE9

43b0829

Before this commit, IE9 would force a change event to fire when the onpropertychange callback fired. This threw an error when undoing text changes: React would try to update a text node that was detached from the DOM.

nhunzaker force-pushed the fix-ie9-undo branch from 5f58a9c to 43b0829 Compare June 4, 2018 12:02

Format code with prettier

5bda719

nhunzaker mentioned this pull request Jun 4, 2018

Fallback to event.srcElement for IE9 #12976

Merged

sophiebits requested changes Jun 4, 2018

View reviewed changes

nhunzaker mentioned this pull request Jun 6, 2018

Remove old reference to inst._wrapperState #12987

Merged

stale bot added the Resolution: Stale Automatically closed due to inactivity label Jan 10, 2020

stale bot closed this Jan 17, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix IE9 Undo Bug #12505

Fix IE9 Undo Bug #12505

nhunzaker commented Mar 31, 2018 •

edited

nhunzaker Mar 31, 2018

nhunzaker Mar 31, 2018

jquense Mar 31, 2018

nhunzaker Mar 31, 2018

aweary Mar 31, 2018

nhunzaker Apr 1, 2018

aweary Apr 2, 2018

gaearon Apr 2, 2018

nhunzaker Apr 16, 2018

nhunzaker commented Apr 16, 2018

gaearon commented Apr 16, 2018 •

edited

nhunzaker commented Jun 2, 2018

nhunzaker commented Jun 4, 2018 •

edited by sophiebits

nhunzaker Jun 4, 2018

nhunzaker Jun 4, 2018

jquense Jun 4, 2018 •

edited

nhunzaker commented Jun 4, 2018

sophiebits Jun 4, 2018

sophiebits Jun 4, 2018

nhunzaker Jun 4, 2018

nhunzaker Jun 4, 2018

nhunzaker Jun 4, 2018

jquense Jun 5, 2018

aweary Jun 5, 2018

jquense Jun 5, 2018

aweary Jun 5, 2018

nhunzaker Jun 11, 2018

facebook-github-bot commented Jun 29, 2018

facebook-github-bot commented Jun 29, 2018

stale bot commented Jan 10, 2020

stale bot commented Jan 17, 2020

Fix IE9 Undo Bug #12505

Fix IE9 Undo Bug #12505

Conversation

nhunzaker commented Mar 31, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nhunzaker commented Apr 16, 2018

gaearon commented Apr 16, 2018 • edited

nhunzaker commented Jun 2, 2018

nhunzaker commented Jun 4, 2018 • edited by sophiebits

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jquense Jun 4, 2018 • edited

Choose a reason for hiding this comment

nhunzaker commented Jun 4, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

facebook-github-bot commented Jun 29, 2018

facebook-github-bot commented Jun 29, 2018

stale bot commented Jan 10, 2020

stale bot commented Jan 17, 2020

nhunzaker commented Mar 31, 2018 •

edited

gaearon commented Apr 16, 2018 •

edited

nhunzaker commented Jun 4, 2018 •

edited by sophiebits

jquense Jun 4, 2018 •

edited