profile
viewpoint

Ask questionsErrors "You returned a non-DOM element. You must specify a refKey in getRootProps"

  • downshift version: 3.2.10
  • node version: 8.15.1
  • npm (or yarn) version: 6.4.1
  • emotion version: 10.0.10

Problem

I'm using emotion element as a root one for downshift with specified refKey -

const containerStyles = css`
  label: dropdown__container;
  width: 100%;
`;
const Container = styled('div')(containerStyles);

// ...

<Container {...getRootProps(
  {
    refKey: 'ref',
    ...ariaLabelProps
  }
)}>
{/* ... */}
</Container>

but downshift keeps complaining -

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.
downshift-js/downshift

Answer questions silviuaavram

I will close this since https://github.com/downshift-js/downshift/pull/756 landed. Let me know if it still does not work.

useful!

Related questions

TypeScript compiler error with ref passed from getInputProps to component using a forwardRef hot 2
Double rendering (Lifecycle hook scheduled a cascading update) after item selection hot 1
TypeScript: definitions missing `preventDownshiftDefault` hot 1
Support RefObjects for sub-components hot 1
Apollo with debounce example - downshift hot 1
Switching between controlled and uncontrolled input hot 1
source:https://uonfu.com/
Github User Rank List