downshift: parent.contains is not a function when used with styled components
downshiftversion: 2.0.10nodeversion: 9.5.0npm(oryarn) version: 1.5.1
Relevant code or config
<Downshift
defaultSelectedItem={selectedOption}
itemToString={item => (item ? item.message : '')}
>
{({
highlightedIndex,
itemToString,
getItemProps,
getMenuProps,
getToggleButtonProps,
isOpen,
selectedItem,
toggleMenu,
}) => (
<div>
<Dropdown.Container>
<Button {...getToggleButtonProps()}>Button Toggle</Button>
<Dropdown isOpen={isOpen} {...getMenuProps()}>
{options.map((option, index) => (
<div
{...getItemProps({
key: option.id,
index,
item: option,
isActive: highlightedIndex === index,
})}
/>
))}
</Dropdown>
</Dropdown.Container>
</div>
)}
</Downshift>
What you did: The 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.
What happened: The error that I am getting is the following:
When 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:
Problem description: Clicking outside of the downshift container div when using styled components is throwing an error and the dropdown window stays open.
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 2
- Comments: 15 (8 by maintainers)
Commits related to this issue
- fix(utils): Checking if parent.contains is a function before using it Closes #490 — committed to arthurdenner/downshift by arthurdenner 6 years ago
- fix(utils): Checking if parent.contains is a function before using it (#492) * fix(utils): Checking if parent.contains is a function before using it Closes #490 * chore: Adding myself as a cont... — committed to downshift-js/downshift by arthurdenner 6 years ago
- Improved typings for getMenuProps Fixes the typing part of #490 — committed to downshift-js/downshift by franklixuefei 6 years ago
- fix(TS): improved typings for getMenuProps (#534) * Improved typings for getMenuProps Fixes the typing part of #490 * Update index.d.ts * Fixed build error * Update index.d.ts — committed to downshift-js/downshift by franklixuefei 6 years ago
- fix(utils): Checking if parent.contains is a function before using it (#492) * fix(utils): Checking if parent.contains is a function before using it Closes #490 * chore: Adding myself as a cont... — committed to Rendez/downshift by arthurdenner 6 years ago
- fix(TS): improved typings for getMenuProps (#534) * Improved typings for getMenuProps Fixes the typing part of #490 * Update index.d.ts * Fixed build error * Update index.d.ts — committed to Rendez/downshift by franklixuefei 6 years ago
I think the problem is that the
getMenuPropsis trying to set arefon the<Dropdown />. Styled components accepts aninnerRefprop for this, so please try with this insteadAltough we should probably add a check if the
refexists before we try accessing it.If nobody is working on this, I’ll take a stab later.
Yes, for accessibility reasons it should always be rendered. Feel free to make a PR to improve docs. I think it is mentioned but could probably be called out better.