parent.contains is not a function when used with styled components

• downshift version: 2.0.10
• node version: 9.5.0
• npm (or yarn) 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.

[alexandernanberg]

I think the problem is that the getMenuProps is trying to set a ref on the <Dropdown />. Styled components accepts an innerRef prop for this, so please try with this instead

<Dropdown isOpen={isOpen} {...getMenuProps({ refKey: 'innerRef' })} />

Altough we should probably add a check if the ref exists before we try accessing it.

[franklixuefei]

If nobody is working on this, I’ll take a stab later.

On Jun 29, 2018, at 6:23 AM, Kent C. Dodds [e-mail] wrote:

And we should add type definitions.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.