Skip to content

Ignore events on not-yet-mounted fibers #9742

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.

Sign up for GitHub

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

Merged
sophiebits merged 1 commit into from
May 26, 2017
Merged

Ignore events on not-yet-mounted fibers #9742

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions src/renderers/dom/shared/ReactDOMEventListener.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
var EventListener = require('fbjs/lib/EventListener');
var PooledClass = require('PooledClass');
var ReactDOMComponentTree = require('ReactDOMComponentTree');
var ReactFiberTreeReflection = require('ReactFiberTreeReflection');
var ReactGenericBatching = require('ReactGenericBatching');
var ReactTypeOfWork = require('ReactTypeOfWork');

Expand Down Expand Up @@ -178,6 +179,17 @@ var ReactDOMEventListener = {
var targetInst = ReactDOMComponentTree.getClosestInstanceFromNode(
nativeEventTarget,
);
if (
targetInst !== null &&
typeof targetInst.tag === 'number' &&
!ReactFiberTreeReflection.isFiberMounted(targetInst)
) {
// If we get an event (ex: img onload) before committing that
// component's mount, ignore it for now (that is, treat it as if it was an
// event on a non-React tree). We might also consider queueing events and
// dispatching them after the mount.
targetInst = null;
}
Copy link
Contributor

@sebmarkbage sebmarkbage May 22, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't block the event if something down below the tree is already mounted since we're not doing this at every level of handleTopLevelImpl's ancestor algorithm. There are mostly theoretical cases where this could matter:

  1. A non-Fiber tree is nested and shares the event system. Not going to happen with our current set up and we'll probably delete Stack by then.

  2. A React subtree node gets manually inserted inside of a not-yet mounted tree. This probably doesn't happen other than for SSR hydration since you can't get access to the newly created nodes. Maybe a custom element.

Another case that can happen is that we block something further up the tree that shouldn't be. I think that can actually happen with hydration:

// sync
ReactDOM.render(<div onClick={handleClick}><div ref={n => leaf = n} dangerouslySetInnerHTML={ssr} /></div>, container);
// async, hydration
ReactDOM.render(<Foo />, leaf);

It'll block all events to the parent while the sub-tree is hydrating.

Copy link
Collaborator Author

@sophiebits sophiebits May 22, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess I can change it.


var bookKeeping = TopLevelCallbackBookKeeping.getPooled(
topLevelType,
Expand Down