[DynamicSideContent]: Custom Component Display Issue in DynamicSideContent

[bomasap]

Describe the bug

There is a display issue when the List component is wrapped inside a SidePanel custom component and placed to sideContent in the DynamicSideContent component. While the DynamicSideContent displays correctly when the List component is directly placed in sideContent, wrapping the List component with the SidePanel custom component causes the List to appear above the ObjectPage.

Isolated Example

https://stackblitz.com/edit/github-zwueh7-kyfacw?file=src%2FApp.tsx,src%2FSidePanel.tsx

Reproduction steps

1. Place a List component directly into the DynamicSideContent component's sideContent. Observe that the DynamicSideContent displays correctly. https://stackblitz.com/edit/github-zwueh7-kyfacw?file=src%2FApp.tsx,src%2FSidePanel.tsx
2. Wrap the same List component with a SidePanel custom component.
3. Place the SidePanel custom component into the DynamicSideContent component's sideContent. Observe that the List appears above the ObjectPage. https://stackblitz.com/edit/github-zwueh7-kyfacw?file=src%2FApp.tsx,src%2FSidePanel.tsx

Expected Behaviour

When the List component is wrapped inside the SidePanel custom component and placed in the DynamicSideContent component's sideContent, it should display correctly without appearing above the ObjectPage.

Screenshots or Videos

UI5 Web Components for React Version

1.27.0

UI5 Web Components Version

1.24.0

Browser

Chrome, Edge, Firefox, Safari

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

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

[bomasap]

Hi Team, We have a workaround that we can add a <div> wrap up the custom component, but that is not expected. Seems the SidePanel return fragment like <>...</> to cause this issue.

[MarcusNotheis]

Hi @bomasap,

when using custom components inside slot props, you have to make sure that you accept the slot prop in the custom component and render it on the most outer element of your custom component: https://stackblitz.com/edit/github-zwueh7-drfh4m?file=src%2FApp.tsx,src%2FSidePanel.tsx%3AL6

You can find the corresponding knowledge base article in our docs here.

[bomasap]

@MarcusNotheis Thanks for your help. This issue has been resolved by using slot. Hence closing this ticket.