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

[davereid91]

• 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.

[kentcdodds]

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

Agreed. I'd accept a PR for that 👍

[davereid91]

Yep that fixed it, thanks very much @alexandernanberg :)

[alexandernanberg]

@kentcdodds Been thinking a bit more about this one. Wouldn't it be good to also print a warning when this happens? The ref is there for solving issues when using the menu inside a portal, so this could lead to unexpected behavior 🤔

[morajabi]

Also, it seems it's not in type definitions.

[kentcdodds]

Yes, we should log a warning 👍

[kentcdodds]

And we should add type definitions.

[franklixuefei]

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

…

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

[xshyne88]

Is there any update on this, I'm still hitting it in my codebase.

[kentcdodds]

@xshyne88, this is the solution: #490 (comment)

[franklixuefei]

Uh... I need some help here...

I applied getMenuProps() to a primitive element, <div>, but it still complains that getMenuProps() was not applied correctly.

my code looks something like below, where I applied getMenuProps on a div, but that div itself is under some composite component.

<SomeCompositeComponent>
  <div {...getMenuProps()}>
    {here goes the menu items}
  </div>
</SomeCompositeComponent>

I thought we only need to specify a refKey if getMenuProps is applied to a composite component, no?

I literally have no idea how to fix this. Please help! Thanks!

[kentcdodds]

Hmmm... I'm unable to reproduce this: https://codesandbox.io/s/github/kentcdodds/downshift-examples/tree/master/?module=%2Fsrc%2Fordered-examples%2F01-basic-autocomplete.js&moduleview=1

[franklixuefei]

@kentcdodds Okay I found the problem. I was mounting and unmounting the entire menu as needed. Apparently menu is meant to be mounted all the time. Not sure if we want to document this explicitly?

[kentcdodds]

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.

[kentcdodds]

🎉 This issue has been resolved in version 2.1.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀