[DynamicSideContent]: Custom Component Display Issue in DynamicSideContent
bomasap opened this issue · 3 comments
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
- 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
- Wrap the same List component with a SidePanel custom component.
- 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
- I’m not disclosing any internal or sensitive information.
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.
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.
@MarcusNotheis
Thanks for your help. This issue has been resolved by using slot
. Hence closing this ticket.