Downshift: styled-components and ref

[rifler]

• downshift version: 3.1.0
• node version: 10.6.0
• npm (or yarn) version: 6.4.1

Relevant code or config

const Main = styled('div')`
    color: red;
`;
...
<Downshift>
    {() => (
        <Main>...</Main>
    )}
</Downshift>
// downshift: If you return a non-DOM element, you must use apply the getRootProps function
...

<Downshift>
    {() => (
        // btw code says I can call getRootProps without args, but typings not
        <Main {...getRootProps({} as any)}>...</Main>
    )}
</Downshift>
// downshift: You returned a non-DOM element. You must specify a refKey in getRootProps
// downshift: You must apply the ref prop "ref" from getRootProps onto your root element

Problem description:
Since v4 styled-components uses forwardRef and accepts ref prop without any problems
https://www.styled-components.com/docs/advanced/#refs

Suggested solution:
For now I fixed it like this

<Main {...getRootProps({} as any, { suppressRefError: true })}>

It would be great to invent solution for this kind of components

[kentcdodds]

Hi @rifler. This is tough. I want to error early so people who don't know what they're doing know that they've done something wrong....

Hmmm... What if we do something like this:

import {isForwardRef} from 'react-is'

// ... code

// then here: https://github.com/paypal/downshift/blob/3c6733b1b66077b5492af1ba48deaba944948064/src/downshift.js#L1159

if (isComposite && !refKeySpecified && !isForwardRef(element)) {

I think that should work. Thoughts? Would you like to open a PR?

[rifler]

Of course, I will.

[chmaltsp]

@rifler to get around this error all you need to do is pass the ref key down to the styled compoent

 <InputWrapper
            {...getRootProps({
              refKey: 'innerRef',
            })}
          >

[rifler]

@chmaltsp do you use v4? In v4 they use forwardRef API and ref key. innerRef is deprecated now

[rifler]

Thanks!

[chekkan]

Shouldn't the same change also be done for the getMenuProps method? Getting the following error when running unit tests. The menu element is a composite styled.ul component in my case.

console.error node_modules/downshift/dist/downshift.cjs.js:1510
downshift: The ref prop "ref" from getMenuProps was not applied correctly on your menu element.

[kentcdodds]

Probably. PRs welcome!