React.Fragment not allowed as returned renderProp

Problem description:

The current setup doesn’t support returning React.Fragment from the renderProp function. Instead it will reach this line which throws an error.

Suggested solution:

From what I can tell the isDOMElement function in the utils.js file should be updated to return true if the element is a React fragment. The function is currently returning typeof element.type === 'string' but in the case of a fragment the element type appears to be a symbol.

I’m happy to create a PR but wanted to have some discussion around it first.

[danseethaler]

Thanks for the response Kent!

I tried the code here and it looks like it’s throwing a different error Uncaught TypeError: _this4._rootNode.contains is not a function at onMouseUp (downshift.esm.js:778).

I’m working on a component that is joined with other components to create a search bar so I was hoping to use a fragment - but at the end of the day you’re right, a div will probably work just fine 😃

[eriklharper]

A good reason to support fragments in general is when say using a composite component that you build with downshift, whose contents that you ultimately want to render to the DOM need to be direct flex children from a parent DOM node that applies display: "flex". When you include an extraneous root div, it breaks intended flex behavior because the nodes that you want to render inside a fragment are now wrapped inside another element, which instead becomes the flex child.