[FlexibleColumnLayout]: Renders all columns regardless which one is active

[TinaAngeloski]

Bug Description

The FlexibleColumnLayout renders all sections regardless which sections is selected. In our case, we have two sections, and at the beginning the user sees only OneColumn Layout. Our app breaks, because in the background it tries to render and load also the second section which is not yet selected nor visible to the user.

Versions: The bug happened after we updated to @ui5/webcomponents: ^1.22.0 and @ui5/webcomponents-react: ^1.25.1. Before it was working with versions @ui5/webcomponents: 1.21.2 and @ui5/webcomponents-react: 1.24.0.

Note: The same started happening to ObjectPage, but I will create a separate issue.

Affected Component

FlexibleColumnLayout, ObjectPage

Expected Behaviour

It should render only the visible sections as before the update.

Isolated Example

https://stackblitz.com/edit/github-wvczr9

Steps to Reproduce

Add FlexibleColumnLayout with two sections but only one Expanded. Also the 'hidden' one will be rendered. As in the provided Isolated Example

Log Output, Stack Trace or Screenshots

Priority

High

UI5 Web Components Version

@ui5/webcomponents-base: ^1.22.0 and @ui5/webcomponents-react: ^1.25.1

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

SAP Signavio

Declaration

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

[Lukas742]

Hi @TinaAngeloski

since you're using our React wrapper (@ui5/webcomponents-react), I took a look at the issue. The behavior you describe is also applicable in previous versions (see here) and since these props are slots, they're always rendered in the DOM (@ilhan007 please correct me if I'm wrong). To solve this you can for example implement conditional rendering.

[dobrinyonkov]

That is correct, passing the slots to the component means they're already in the Light DOM. Any script will execute here no matter if the web component decides to display it or not in the Shadow DOM. You could really only implement conditional rendering like the one in the following example - https://stackblitz.com/edit/github-wvczr9-uquixw?file=src%2FLayout.jsx,src%2FMidComponent.jsx

Of course, this could be done in many other ways, please let us know if this works for you or if you encouter any issues.

Kind Regards, Dobrin