{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react/issues/8117","repository_url":"https://api.github.com/repos/facebook/react","labels_url":"https://api.github.com/repos/facebook/react/issues/8117/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react/issues/8117/comments","events_url":"https://api.github.com/repos/facebook/react/issues/8117/events","html_url":"https://github.com/facebook/react/pull/8117","id":185523197,"number":8117,"title":"Attach event listeners at the root of the tree instead of document","user":{"login":"vjeux","id":197597,"avatar_url":"https://avatars.githubusercontent.com/u/197597?v=3","gravatar_id":"","url":"https://api.github.com/users/vjeux","html_url":"https://github.com/vjeux","followers_url":"https://api.github.com/users/vjeux/followers","following_url":"https://api.github.com/users/vjeux/following{/other_user}","gists_url":"https://api.github.com/users/vjeux/gists{/gist_id}","starred_url":"https://api.github.com/users/vjeux/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vjeux/subscriptions","organizations_url":"https://api.github.com/users/vjeux/orgs","repos_url":"https://api.github.com/users/vjeux/repos","events_url":"https://api.github.com/users/vjeux/events{/privacy}","received_events_url":"https://api.github.com/users/vjeux/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/facebook/react/labels/GH%20Review:%20needs-revision","name":"GH Review: needs-revision","color":"e11d21"}],"state":"open","locked":false,"assignee":{"login":"sebmarkbage","id":63648,"avatar_url":"https://avatars.githubusercontent.com/u/63648?v=3","gravatar_id":"","url":"https://api.github.com/users/sebmarkbage","html_url":"https://github.com/sebmarkbage","followers_url":"https://api.github.com/users/sebmarkbage/followers","following_url":"https://api.github.com/users/sebmarkbage/following{/other_user}","gists_url":"https://api.github.com/users/sebmarkbage/gists{/gist_id}","starred_url":"https://api.github.com/users/sebmarkbage/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sebmarkbage/subscriptions","organizations_url":"https://api.github.com/users/sebmarkbage/orgs","repos_url":"https://api.github.com/users/sebmarkbage/repos","events_url":"https://api.github.com/users/sebmarkbage/events{/privacy}","received_events_url":"https://api.github.com/users/sebmarkbage/received_events","type":"User","site_admin":false},"assignees":[{"login":"sebmarkbage","id":63648,"avatar_url":"https://avatars.githubusercontent.com/u/63648?v=3","gravatar_id":"","url":"https://api.github.com/users/sebmarkbage","html_url":"https://github.com/sebmarkbage","followers_url":"https://api.github.com/users/sebmarkbage/followers","following_url":"https://api.github.com/users/sebmarkbage/following{/other_user}","gists_url":"https://api.github.com/users/sebmarkbage/gists{/gist_id}","starred_url":"https://api.github.com/users/sebmarkbage/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sebmarkbage/subscriptions","organizations_url":"https://api.github.com/users/sebmarkbage/orgs","repos_url":"https://api.github.com/users/sebmarkbage/repos","events_url":"https://api.github.com/users/sebmarkbage/events{/privacy}","received_events_url":"https://api.github.com/users/sebmarkbage/received_events","type":"User","site_admin":false}],"milestone":null,"comments":14,"created_at":"2016-10-26T22:06:14Z","updated_at":"2016-10-27T01:32:42Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/facebook/react/pulls/8117","html_url":"https://github.com/facebook/react/pull/8117","diff_url":"https://github.com/facebook/react/pull/8117.diff","patch_url":"https://github.com/facebook/react/pull/8117.patch"},"body":"Context: we are investigating using React in order to build both Atom core components and Atom plugins. Work have been done last year to make sure that multiple React instances in the same app and this is working well. The only remaining issue is the fact that e.stopPropagation doesn't work as intended when there's two React trees that are nested. The reason is that both event listeners are added to the root of the tree and therefore do not cancel each others. The suggested solution is to attach event listeners at the root of the React tree.\r\n\r\nTo understand how this solves the problem, let's assume that we have OuterComponent which is running React version A and InnerComponent that is running version 2. The inner component attaches the event listener at the top of the inner tree using bubble phase and the outer component at the root of the outer component.\r\n\r\nWhen there's a click event on the innerComponent, the inner version of React will be notified first because it's deeper in the tree, which will dispatch the event through the innerComponent hierarchy and eventually something will call React e.stopPropagation(), which will call the DOM e.stopPropagation(), so that the outer version of React will never be notified.\r\n\r\nTest Plan:\r\n- Have the changes of this revision\r\n- `yarn build` to generate react.js and react-dom.js\r\n- Copy react.js and react-dom.js into react2.js and react-dom2.js\r\n- Change the global assignation of React and ReactDOM inside of *2.js to React2 and ReactDOM2\r\n- Build a test case with two nested components and the inner one calling e.stopPropagation\r\n- http://fooo.fr/~vjeux/fb/vjeux-test/test-event-boundary.html\r\n- Make sure it doesn't trigger the outer one.\r\n- Revert the changes and make sure that clicking on the inner one triggers both events to fire\r\n\r\nImportant Note:\r\nI don't fully understand the implication of this changes around performance and potential side-effects that could happen. I'm going to spend time right now investigating this. Would love ideas on what to check :)"},"comment":{"url":"https://api.github.com/repos/facebook/react/issues/comments/256523283","html_url":"https://github.com/facebook/react/pull/8117#issuecomment-256523283","issue_url":"https://api.github.com/repos/facebook/react/issues/8117","id":256523283,"user":{"login":"vjeux","id":197597,"avatar_url":"https://avatars.githubusercontent.com/u/197597?v=3","gravatar_id":"","url":"https://api.github.com/users/vjeux","html_url":"https://github.com/vjeux","followers_url":"https://api.github.com/users/vjeux/followers","following_url":"https://api.github.com/users/vjeux/following{/other_user}","gists_url":"https://api.github.com/users/vjeux/gists{/gist_id}","starred_url":"https://api.github.com/users/vjeux/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/vjeux/subscriptions","organizations_url":"https://api.github.com/users/vjeux/orgs","repos_url":"https://api.github.com/users/vjeux/repos","events_url":"https://api.github.com/users/vjeux/events{/privacy}","received_events_url":"https://api.github.com/users/vjeux/received_events","type":"User","site_admin":false},"created_at":"2016-10-27T01:32:42Z","updated_at":"2016-10-27T01:32:42Z","body":"@conartist6 thanks for chiming in! The constraint here is that I want to make it work for nested roots that can be implemented with different versions of React. So we cannot \"register a click handler with the document if it has not yet\" since we don't want the two React versions to communicate."}}
{"actor":{"display_login":"vjeux"}}