Grid: Grid fails to properly layout children when child is a custom component returning multiple elements

[sadie100]

Describe the bug

I've encountered an issue with the Grid component where it doesn't correctly layout its children when the child is a custom component that returns multiple elements wrapped in a React Fragment. I've created a Stackblitz example to demonstrate this behavior.

While I'm not certain of the underlying cause, in my experience, wrapper components typically manage to layout their children according to the specified configuration, even when those children are custom components. (For comparison, I've added an example in the Stackblitz demonstration showing how an HTML grid div successfully layouts the same custom component.)

Given this discrepancy between expected and actual behavior, I believe this might be a bug.

Any insights or guidance on this issue would be greatly appreciated. Always thankful for your time and attention.

Isolated Example

https://stackblitz.com/edit/github-yqwc1b-ave8oc?file=src%2FApp.tsx

Reproduction steps

1. Create a Grid component with specified layout properties.
2. Create a custom component that returns multiple elements wrapped in a React Fragment.
3. Place this custom component as a direct child of the Grid.
4. Observe that the Grid fails to apply the specified layout to the nested children.

Expected Behaviour

The Grid should apply its layout properties to the children of the custom component, similar to how it handles multiple elements when they're directly placed within the Grid.

Screenshots or Videos

UI5 Web Components for React Version

Our project has 1.28.1, but 2.1.0 StackBlitz example has same problem

UI5 Web Components Version

Our project : 1.24.2, StackBlitz : 2.2.2

Browser

Chrome

Operating System

mac Sonoma 14.3

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[MarcusNotheis]

Hi @sadie100,

thanks for the detailed issue description 🙂

The Grid component in UI5 Web Components for React is designed to work on the React elements which are passed as children to the component instead of the elements which will be rendered in the DOM. There is an additional helper built-in which allows us to remove fragments from the tree, but ultimately the component is only working on the first level its children. The main reason for that is, that the component is working on the data-layout-span and data-layout-indent props of the children to calculate the final layout.

I fully understand that the behaviour is unexpected, but I have to admit that I think that we can't offer a proper fix for that without breaking the existing API of the component, but we'll look into it. We'll update our documentation as well to mention the limitations I've shared above.

Last but not least, the Grid component is a pretty old component in our library and was initially created to support grid layouts in browsers that didn't support the css grid at that time (greetings to IE11 😄), so in your case using the display: grid like you did in the StackBlitz might be the better solution for your use case.

I hope this helps :)