{"action":"created","issue":{"url":"https://api.github.com/repos/react-toolbox/react-toolbox/issues/1535","repository_url":"https://api.github.com/repos/react-toolbox/react-toolbox","labels_url":"https://api.github.com/repos/react-toolbox/react-toolbox/issues/1535/labels{/name}","comments_url":"https://api.github.com/repos/react-toolbox/react-toolbox/issues/1535/comments","events_url":"https://api.github.com/repos/react-toolbox/react-toolbox/issues/1535/events","html_url":"https://github.com/react-toolbox/react-toolbox/issues/1535","id":235389484,"number":1535,"title":"Tabs: \"Cannot read property 'getBoundingClientRect' of null\"","user":{"login":"bionikspoon","id":5052422,"avatar_url":"https://avatars3.githubusercontent.com/u/5052422?v=4","gravatar_id":"","url":"https://api.github.com/users/bionikspoon","html_url":"https://github.com/bionikspoon","followers_url":"https://api.github.com/users/bionikspoon/followers","following_url":"https://api.github.com/users/bionikspoon/following{/other_user}","gists_url":"https://api.github.com/users/bionikspoon/gists{/gist_id}","starred_url":"https://api.github.com/users/bionikspoon/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bionikspoon/subscriptions","organizations_url":"https://api.github.com/users/bionikspoon/orgs","repos_url":"https://api.github.com/users/bionikspoon/repos","events_url":"https://api.github.com/users/bionikspoon/events{/privacy}","received_events_url":"https://api.github.com/users/bionikspoon/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":7,"created_at":"2017-06-12T22:58:34Z","updated_at":"2017-09-18T17:40:36Z","closed_at":"2017-08-02T16:21:20Z","author_association":"NONE","body":"## Problem\r\n\r\nReliably getting an error with HMR updates:`Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null at Tabs.js:86`\r\n\r\n## Context\r\n\r\n- Version: `2.0.0-beta.8`\r\n- Error is pointing to this line: https://github.com/react-toolbox/react-toolbox/blob/2.0.0-beta.8/components/tabs/Tabs.js#L85\r\n- **In the inspector `this.navigationNode` equals `null`**\r\n  - THIS IS SUPER SURPRISING since it's behind a guard clause:\r\n    ```js\r\n    if (this.navigationNode /* && ... */) {\r\n      // ...\r\n      // somehow this.navigationNode is null !!! object mutation, race condition? inside a callback?\r\n    }\r\n    ```\r\n- ~~Possibly related: On my team, we're not using the component to render the content of each tab (`props.children` of `<Tab />` is undefined). We're only using it for the navigation and we handle displaying tab content somewhere else.  Not sure if this is totally relevant.~~\r\n\r\n## Possible Solutions\r\n\r\nPull `this.navigationNode` into a variable. \r\n\r\n### From\r\n```js\r\n    updatePointer = (idx) => {\r\n      if (this.navigationNode && this.navigationNode.children[idx]) {\r\n        requestAnimationFrame(() => {\r\n          const nav = this.navigationNode.getBoundingClientRect();\r\n          const label = this.navigationNode.children[idx].getBoundingClientRect();\r\n          const scrollLeft = this.navigationNode.scrollLeft;\r\n          this.setState({\r\n            pointer: {\r\n              top: `${nav.height}px`,\r\n              left: `${(label.left + scrollLeft) - nav.left}px`,\r\n              width: `${label.width}px`,\r\n            },\r\n          });\r\n        });\r\n      }\r\n```\r\n\r\n### TO\r\n```js\r\n    updatePointer = (idx) => {\r\n      const navigationNode = this.navigationNode\r\n      if (navigationNode && navigationNode.children[idx]) {\r\n        requestAnimationFrame(() => {\r\n          const nav = navigationNode.getBoundingClientRect();\r\n          const label = navigationNode.children[idx].getBoundingClientRect();\r\n          const scrollLeft = navigationNode.scrollLeft;\r\n          this.setState({\r\n            pointer: {\r\n              top: `${nav.height}px`,\r\n              left: `${(label.left + scrollLeft) - nav.left}px`,\r\n              width: `${label.width}px`,\r\n            },\r\n          });\r\n        });\r\n      }\r\n```"},"comment":{"url":"https://api.github.com/repos/react-toolbox/react-toolbox/issues/comments/330298366","html_url":"https://github.com/react-toolbox/react-toolbox/issues/1535#issuecomment-330298366","issue_url":"https://api.github.com/repos/react-toolbox/react-toolbox/issues/1535","id":330298366,"user":{"login":"jodonnell","id":217747,"avatar_url":"https://avatars0.githubusercontent.com/u/217747?v=4","gravatar_id":"","url":"https://api.github.com/users/jodonnell","html_url":"https://github.com/jodonnell","followers_url":"https://api.github.com/users/jodonnell/followers","following_url":"https://api.github.com/users/jodonnell/following{/other_user}","gists_url":"https://api.github.com/users/jodonnell/gists{/gist_id}","starred_url":"https://api.github.com/users/jodonnell/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jodonnell/subscriptions","organizations_url":"https://api.github.com/users/jodonnell/orgs","repos_url":"https://api.github.com/users/jodonnell/repos","events_url":"https://api.github.com/users/jodonnell/events{/privacy}","received_events_url":"https://api.github.com/users/jodonnell/received_events","type":"User","site_admin":false},"created_at":"2017-09-18T17:40:36Z","updated_at":"2017-09-18T17:40:36Z","author_association":"NONE","body":"yes, we have forked react toolbox and pulled that commit in, still seeing the same issues.  "}}
{"actor":{"display_login":"jodonnell"}}