Skip to content

Commit

Permalink
Just ignore events on unmounted components
Browse files Browse the repository at this point in the history
Fixes facebook#4865 and also seems to fixes facebook#3790.
  • Loading branch information
sophiebits committed Sep 18, 2015
1 parent 41e4bfb commit 45f85a6
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 6 deletions.
11 changes: 5 additions & 6 deletions src/renderers/dom/client/ReactMount.js
Original file line number Diff line number Diff line change
Expand Up @@ -392,12 +392,11 @@ function findFirstReactDOMImpl(node) {
do {
lastID = internalGetID(current);
current = current.parentNode;
invariant(
current != null,
'findFirstReactDOMImpl(...): Unexpected detached subtree found when ' +
'traversing DOM from node `%s`.',
nodeID
);
if (current == null) {
// The passed-in node has been detached from the container it was
// originally rendered into.
return null;
}
} while (lastID !== reactRootID);

if (current === containersByReactRootID[reactRootID]) {
Expand Down
70 changes: 70 additions & 0 deletions src/renderers/dom/client/__tests__/ReactEventIndependence-test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
/**
* Copyright 2013-2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @emails react-core
*/

'use strict';

var React;
var ReactDOM;
var ReactTestUtils;

describe('ReactEventIndependence', function() {
beforeEach(function() {
require('mock-modules').dumpCache();

React = require('React');
ReactDOM = require('ReactDOM');
ReactTestUtils = require('ReactTestUtils');
});

it('does not crash with other react inside', function() {
var clicks = 0;
var div = ReactTestUtils.renderIntoDocument(
<div
onClick={() => clicks++}
dangerouslySetInnerHTML={{
__html: '<button data-reactid=".z">click me</div>',
}}
/>
);
ReactTestUtils.SimulateNative.click(div.firstChild);
expect(clicks).toBe(1);
});

it('does not crash with other react outside', function() {
var clicks = 0;
var outer = document.createElement('div');
outer.setAttribute('data-reactid', '.z');
var inner = ReactDOM.render(
<button onClick={() => clicks++}>click me</button>,
outer
);
ReactTestUtils.SimulateNative.click(inner);
expect(clicks).toBe(1);
});

it('does not when event fired on unmounted tree', function() {
var clicks = 0;
var container = document.createElement('div');
var button = ReactDOM.render(
<button onClick={() => clicks++}>click me</button>,
container
);

// Now we unmount the component, as if caused by a non-React event handler
// for the same click we're about to simulate, like closing a layer:
ReactDOM.unmountComponentAtNode(container);
ReactTestUtils.SimulateNative.click(button);

// Since the tree is unmounted, we don't dispatch the click event.
expect(clicks).toBe(0);
});

});

0 comments on commit 45f85a6

Please sign in to comment.