{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react/issues/11836","repository_url":"https://api.github.com/repos/facebook/react","labels_url":"https://api.github.com/repos/facebook/react/issues/11836/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react/issues/11836/comments","events_url":"https://api.github.com/repos/facebook/react/issues/11836/events","html_url":"https://github.com/facebook/react/issues/11836","id":281396307,"number":11836,"title":"React preserves duplicates of DOM node on re-render.","user":{"login":"jake-daniels","id":14806713,"avatar_url":"https://avatars1.githubusercontent.com/u/14806713?v=4","gravatar_id":"","url":"https://api.github.com/users/jake-daniels","html_url":"https://github.com/jake-daniels","followers_url":"https://api.github.com/users/jake-daniels/followers","following_url":"https://api.github.com/users/jake-daniels/following{/other_user}","gists_url":"https://api.github.com/users/jake-daniels/gists{/gist_id}","starred_url":"https://api.github.com/users/jake-daniels/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jake-daniels/subscriptions","organizations_url":"https://api.github.com/users/jake-daniels/orgs","repos_url":"https://api.github.com/users/jake-daniels/repos","events_url":"https://api.github.com/users/jake-daniels/events{/privacy}","received_events_url":"https://api.github.com/users/jake-daniels/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-12-12T14:06:37Z","updated_at":"2017-12-12T14:17:01Z","closed_at":null,"author_association":"NONE","body":"Hi guys. I'm getting really weird behavior in my latest project. I assume it's a bug in React.\r\nI want to override default browser context menu. I subscribed for `contextmenu` and `click` events in `componentDidMount`. On right click (context menu) I want to show my custom div. On left click, this div should hide. In event listeners I do:\r\n\r\n```\r\nonContextMenu = (e) => {\r\n\tif ((e.target as any).id === CONTEXT_MENU_ID) {\r\n\t\tconst {offsetX, offsetY} = e\r\n\t\tconst contextMenu = {\r\n\t\t\tisActive: true,\r\n\t\t\tposition: {\r\n\t\t\t\tx: offsetX,\r\n\t\t\t\ty: offsetY,\r\n\t\t\t},\r\n\t\t}\r\n\t\tthis.setState({contextMenu})\r\n\t\te.preventDefault()\r\n\t}\r\n}\r\n\r\nonClick = (e) => {\r\n\tconst contextMenu = {\r\n\t\tisActive: false,\r\n\t\tposition: {x: 0, y: 0},\r\n\t}\r\n\tthis.setState({contextMenu})\r\n}\r\n```\r\nand in `render` there's:\r\n```\r\n{(this.state.contextMenu.isActive) && (\r\n\t<div className='menu-item noselect'>\r\n\t\t<i className='fa fa-plus'/>\r\n\t\t<span> Add new note </span>\r\n\t</div>\r\n)}\r\n```\r\nI assume everybody can imagine expected behavior. But real behavior is:\r\nright click > context menu shows up > left click > context menu is still there > right click > another context menu shows up... and so on... You can literally see DOM nodes being duplicated in Elements tab in DevTools\r\n\r\nYou can try it here: https://github.com/jake-daniels/zen-tab\r\nThe code is in `src/app/controller/NotesBoard.tsx` file.\r\nTry `npm install` `npm start`, then right/left click somewhere on blue area.\r\n\r\nEnvironment:\r\nMS Windows 8.1 x64\r\nChrome 63.0.3239.84\r\nReact 16.2.0\r\n"},"comment":{"url":"https://api.github.com/repos/facebook/react/issues/comments/351063716","html_url":"https://github.com/facebook/react/issues/11836#issuecomment-351063716","issue_url":"https://api.github.com/repos/facebook/react/issues/11836","id":351063716,"user":{"login":"gaearon","id":810438,"avatar_url":"https://avatars0.githubusercontent.com/u/810438?v=4","gravatar_id":"","url":"https://api.github.com/users/gaearon","html_url":"https://github.com/gaearon","followers_url":"https://api.github.com/users/gaearon/followers","following_url":"https://api.github.com/users/gaearon/following{/other_user}","gists_url":"https://api.github.com/users/gaearon/gists{/gist_id}","starred_url":"https://api.github.com/users/gaearon/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gaearon/subscriptions","organizations_url":"https://api.github.com/users/gaearon/orgs","repos_url":"https://api.github.com/users/gaearon/repos","events_url":"https://api.github.com/users/gaearon/events{/privacy}","received_events_url":"https://api.github.com/users/gaearon/received_events","type":"User","site_admin":false},"created_at":"2017-12-12T14:17:01Z","updated_at":"2017-12-12T14:17:01Z","author_association":"MEMBER","body":"Can you create a minimal example without TypeScript please? Preferably as a jsfiddle."}}
{"actor":{"display_login":"gaearon"}}