{"action":"created","issue":{"url":"https://api.github.com/repos/reactjs/react-modal/issues/459","repository_url":"https://api.github.com/repos/reactjs/react-modal","labels_url":"https://api.github.com/repos/reactjs/react-modal/issues/459/labels{/name}","comments_url":"https://api.github.com/repos/reactjs/react-modal/issues/459/comments","events_url":"https://api.github.com/repos/reactjs/react-modal/issues/459/events","html_url":"https://github.com/reactjs/react-modal/issues/459","id":243969886,"number":459,"title":"Question: Unmounting the parent & the beforeClose call","user":{"login":"declanelcocks","id":2836593,"avatar_url":"https://avatars3.githubusercontent.com/u/2836593?v=4","gravatar_id":"","url":"https://api.github.com/users/declanelcocks","html_url":"https://github.com/declanelcocks","followers_url":"https://api.github.com/users/declanelcocks/followers","following_url":"https://api.github.com/users/declanelcocks/following{/other_user}","gists_url":"https://api.github.com/users/declanelcocks/gists{/gist_id}","starred_url":"https://api.github.com/users/declanelcocks/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/declanelcocks/subscriptions","organizations_url":"https://api.github.com/users/declanelcocks/orgs","repos_url":"https://api.github.com/users/declanelcocks/repos","events_url":"https://api.github.com/users/declanelcocks/events{/privacy}","received_events_url":"https://api.github.com/users/declanelcocks/received_events","type":"User","site_admin":false},"labels":[{"id":131195818,"url":"https://api.github.com/repos/reactjs/react-modal/labels/bug","name":"bug","color":"fc2929","default":true}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2017-07-19T08:59:57Z","updated_at":"2017-07-20T13:36:12Z","closed_at":null,"body":"### Summary:\r\n\r\nI have a page, with some components that are conditionally rendered as below and some of these components will contain a modal. The modals themselves have no internal state or anything like that.\r\n\r\nIf you check below, this is the `onClose` which eventually gets applied to the modal. So the `hideModal` function is getting called, hiding the modal and even removing any `aria` attributes on the body. Good 👍 \r\n\r\nHowever, the `setTab` part will cause my conditional render to destroy the parent that the modal is inside. As a result of this, the `ReactModal__Body--open` class is never removed from the body 🤔  It will remove this class if I do any of the following:\r\n\r\n- Move the rendering of the modal to outside of this conditional render (no problem since `isOpen` is decided be redux anyway)\r\n- Remove the `setTab` call which is triggering the parent to unmount\r\n- Since the modal is using `closeTimeoutMS={250}`, I can even call `setTab` after `250ms` and it will work.\r\n- Removing the `closeTimeoutMS` from my modal will also work\r\n- Wrapping `setTab` in a `setTimeout` of `0` also works, but feels quite hacky\r\n\r\nWhat is the recommended approach for something like this? It's very odd that the modal itself and the `aria` attribute are removed, but the body class is left behind. It all stems from the fact the parent is conditionally shown.\r\n\r\n### Link to example of issue:\r\n```javascript\r\n{showTab === 1 && <TabOne />}\r\n```\r\n\r\n```javascript\r\nwithHandlers({\r\n    onClose: ({ setTab, hideModal }) => () => {\r\n        setTab(2);\r\n        hideModal();\r\n    }\r\n}),\r\n```\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/reactjs/react-modal/issues/comments/316704976","html_url":"https://github.com/reactjs/react-modal/issues/459#issuecomment-316704976","issue_url":"https://api.github.com/repos/reactjs/react-modal/issues/459","id":316704976,"user":{"login":"declanelcocks","id":2836593,"avatar_url":"https://avatars3.githubusercontent.com/u/2836593?v=4","gravatar_id":"","url":"https://api.github.com/users/declanelcocks","html_url":"https://github.com/declanelcocks","followers_url":"https://api.github.com/users/declanelcocks/followers","following_url":"https://api.github.com/users/declanelcocks/following{/other_user}","gists_url":"https://api.github.com/users/declanelcocks/gists{/gist_id}","starred_url":"https://api.github.com/users/declanelcocks/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/declanelcocks/subscriptions","organizations_url":"https://api.github.com/users/declanelcocks/orgs","repos_url":"https://api.github.com/users/declanelcocks/repos","events_url":"https://api.github.com/users/declanelcocks/events{/privacy}","received_events_url":"https://api.github.com/users/declanelcocks/received_events","type":"User","site_admin":false},"created_at":"2017-07-20T13:36:12Z","updated_at":"2017-07-20T13:36:12Z","body":"> Move the rendering of the modal to outside of this conditional render (no problem since isOpen is decided be redux anyway)\r\n\r\n@diasbruno Yeah that was one \"fix\" I mentioned in my OP that I considered. The modal will always be called by this tab, so it makes sense to have the `<Modal />` component inside that tab. Using a `setTimeout` is better for me, as it means I don't have a random `<Modal />` rendered somewhere that doesn't make any sense."}}
{"actor":{"display_login":"declanelcocks"}}