Downshift: Can't compose Downshift with other 'render prop' components because of validateGetRootPropsCalledCorrectly

[jf248]

• downshift version: 2.0.19
• node version:
• npm (or yarn) version:

Reproduction repository:
https://codesandbox.io/s/jjk32o429y

Problem description:
(I've seen #235 and aware of the suppressRefError workaround but it doesn't work for this use case, as demonstrated.)

I'm trying to 'compose'/'chain' Downshift with another 'render prop' component. (My reproduction example is deliberately trivial but composability is, I think, a really useful property of the 'render prop' pattern.)

I've got the example working in this fork:
https://codesandbox.io/s/oo096p975y

I have had to hack the Downshift code to make it work:

• In render(): this.getRootProps.called = true. (I do call it.)
• In validateGetRootPropsCalledCorrectly(): change a throw new Error to console.warn
• In input_handleBlur() add a console.log(this._rootNode) just to demonstrate it has been set correctly

Suggested solution:
Perhaps adding a suppressRefError prop to the Downshift component itself to allow this use case?

And thanks so much for Downshift!

[kentcdodds]

What if you did this: https://codesandbox.io/s/93kqpy8lvp

[jf248]

Yes, that works, but it entangles the presentational root div inside the logic components (Downshift and Foo). It prevents us extracting a reusable pure logic component DownshiftWithFoo:

const DownshiftWithFoo = () => <Downshift>{() => <Foo/>}</Downshift>

[kentcdodds]

Interesting... Ok, I'd be fine with an (undocumented) prop for this use case. PRs accepted. Thanks @jf248!

[jf248]

Thanks, I'll send a PR

[martinpgaunt]

I8