downshift: 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:

screen shot 2018-06-27 at 14 40 47

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:

screen shot 2018-06-27 at 14 45 08

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

Most upvoted comments

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.

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

On Jun 29, 2018, at 6:23 AM, Kent C. Dodds notifications@github.com 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.

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.