{"action":"opened","issue":{"url":"https://api.github.com/repos/paypal/downshift/issues/490","repository_url":"https://api.github.com/repos/paypal/downshift","labels_url":"https://api.github.com/repos/paypal/downshift/issues/490/labels{/name}","comments_url":"https://api.github.com/repos/paypal/downshift/issues/490/comments","events_url":"https://api.github.com/repos/paypal/downshift/issues/490/events","html_url":"https://github.com/paypal/downshift/issues/490","id":336239158,"node_id":"MDU6SXNzdWUzMzYyMzkxNTg=","number":490,"title":"parent.contains is not a function when used with styled components","user":{"login":"davereid91","id":17887108,"node_id":"MDQ6VXNlcjE3ODg3MTA4","avatar_url":"https://avatars0.githubusercontent.com/u/17887108?v=4","gravatar_id":"","url":"https://api.github.com/users/davereid91","html_url":"https://github.com/davereid91","followers_url":"https://api.github.com/users/davereid91/followers","following_url":"https://api.github.com/users/davereid91/following{/other_user}","gists_url":"https://api.github.com/users/davereid91/gists{/gist_id}","starred_url":"https://api.github.com/users/davereid91/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/davereid91/subscriptions","organizations_url":"https://api.github.com/users/davereid91/orgs","repos_url":"https://api.github.com/users/davereid91/repos","events_url":"https://api.github.com/users/davereid91/events{/privacy}","received_events_url":"https://api.github.com/users/davereid91/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-06-27T13:50:32Z","updated_at":"2018-06-27T13:50:32Z","closed_at":null,"author_association":"NONE","body":"<!--\r\nThanks for your interest in the project. I appreciate bugs filed and PRs submitted!\r\nPlease make sure that you are familiar with and follow the Code of Conduct for\r\nthis project (found in the CODE_OF_CONDUCT.md file).\r\n\r\nPlease fill out this template with all the relevant information so we can\r\nunderstand what's going on and fix the issue.\r\n\r\nI'll probably ask you to submit the fix (after giving some direction). If you've\r\nnever done that before, that's great! Check this free short video tutorial to\r\nlearn how: http://kcd.im/pull-request\r\n-->\r\n\r\n- `downshift` version: 2.0.10\r\n- `node` version: 9.5.0\r\n- `npm` (or `yarn`) version: 1.5.1\r\n\r\nRelevant code or config\r\n\r\n```javascript\r\n        <Downshift\r\n            defaultSelectedItem={selectedOption}\r\n            itemToString={item => (item ? item.message : '')}\r\n        >\r\n            {({\r\n                highlightedIndex,\r\n                itemToString,\r\n                getItemProps,\r\n                getMenuProps,\r\n                getToggleButtonProps,\r\n                isOpen,\r\n                selectedItem,\r\n                toggleMenu,\r\n            }) => (\r\n                <div>\r\n                    <Dropdown.Container>\r\n                        <Button {...getToggleButtonProps()}>Button Toggle</Button>\r\n                        <Dropdown isOpen={isOpen} {...getMenuProps()}>\r\n                            {options.map((option, index) => (\r\n                                 <div\r\n                                    {...getItemProps({\r\n                                        key: option.id,\r\n                                        index,\r\n                                        item: option,\r\n                                        isActive: highlightedIndex === index,\r\n                                    })}\r\n                                />\r\n                            ))}\r\n                        </Dropdown>\r\n                    </Dropdown.Container>\r\n                </div>\r\n            )}\r\n        </Downshift>\r\n```\r\n\r\nWhat you did:\r\nThe code above is pseudo code but roughly equates to what I am doing. I am building a dropdown using downshift that toggles when you click a button. I am combining this with styled components and when I click outside of the div I am getting an error from within downshift.\r\n\r\nWhat happened:\r\nThe error that I am getting is the following:\r\n\r\n<img width=\"410\" alt=\"screen shot 2018-06-27 at 14 40 47\" src=\"https://user-images.githubusercontent.com/17887108/41977816-40c85868-7a18-11e8-8b32-dbdf9b2fcc2c.png\">\r\n\r\nWhen digging deeper into this, it's because the parent in isOrContainsNode is coming through as a Styled Component wrapper as you can see in the screenshot below:\r\n\r\n<img width=\"811\" alt=\"screen shot 2018-06-27 at 14 45 08\" src=\"https://user-images.githubusercontent.com/17887108/41978035-cdd70aa6-7a18-11e8-9d0c-810793553d63.png\">\r\n\r\nProblem description:\r\nClicking outside of the downshift container div when using styled components is throwing an error and the dropdown window stays open."}}
{"actor":{"display_login":"davereid91"}}