[material-ui][Stack] Not accepting a React Fragment when using it with a divider

[juanialt]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:

1. Use the Stack component
2. Wrap the children elements inside a React Fragment. (in my particular scenario I am sending this as a prop that is why I send it wrapped in a fragment)
3. Add a prop to the Stack component to add "dividers" (divider={<div>xxx</div>})
4. The component generates the spacing between each element but it doesn't add the dividers

Sandbox example:
https://codesandbox.io/s/stack-divider-fragment-bug-lnypq9

Current behavior 😯

There is no divider between each children element.

<Stack>
  <div>one</div>
  // space
  <div>two</div>
  // space
  <div>three</div>
</Stack>

Expected behavior 🤔

Should add between each children element a divider

<Stack>
  <div>one</div>
  // space
  <divider/>
  // space
  <div>two</div>
  // space
  <divider/>
  // space
  <div>three</div>
</Stack>

Context 🔦

I created an extended version of the Stack component. It's almost the same but with some additions. If you send the children elements as a React Fragment is where you get the bug. I need to accept those because it's a valid JSX code and also because my component accepts the children prop.

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[siriwatknp]

I doubt if we should support React.Fragment as a child. cc @DiegoAndai

If we want to, the joinChildren has to be recursive to check if the type is Symbol(react.fragment).

[jaydenseric]

See #38533 .

[DiegoAndai]

I would agree that this is expected with the current implementation.

Supporting a Fragment as a child would be an enhancement or new feature, so we should either wait for upvotes or someone to volunteer to work on it. I'm not sure if we can make it without breaking changes.

As @jaydenseric pointed out, this issue is closely related to #38533. There's a proposal on that issue on how this can be solved.