FlexibleColumnLayout: Does not render properly in TwoColumnsMidExpanded layout after a condition

[AndrianStoikov]

Describe the bug
The FlexibleColumnLayout using TwoColumnsMidExpanded layout does not render properly after a condition. The first column is shown and then immediately hidden and clicking the expand arrow does not change the layout. In our case we have an async request happening which determines the tabs that the user should see. After the request the FlexibleColumnLayout fails to render properly. The codesandbox illustrates the bug well, it is best to open the demo in a full screen desktop otherwise it is not obvious.

Isolated Example
https://codesandbox.io/s/tender-blackwell-4cd66?file=/src/Component.js

To Reproduce
Steps to reproduce the behavior:

1. Open the application on a desktop screen
2. Wait for the BusyIndicator to hide.

Expected behavior
After the BusyIndicator is hidden the FlexibleColumnLayout should render both columns normally

Screenshots
Current

Expected

UI5 Web Components for React Information
"@ui5/webcomponents": "1.0.0-rc.14",
"@ui5/webcomponents-react": "0.16.3",
Operating System: Windows 10 20H2
Browser:
Microsoft Edge
Version 91.0.864.41 (Official build) (64-bit)
Reproducible on Chrome 91 as well.

Additional context
I noticed that the bug with TwoColumnsMidExpanded also happens if I use device emulation in the browser and start changing the screen width from mobile to desktop and vice versa.

[texttechne]

@AndrianStoikov I'm afraid that your problem assessment is not correct: It doesn't matter if you render the FlexibleColumnLayout with a condition or without => Comment out the useEffect part, still the same result.

I think your problem is that you've put the FlexibleColumnLayout within a Tab. I assume that this is neither intended nor supported: Compare Fiori Guidelines. Here you can see that the FlexibleColumnLayout is a "Floorplan" which you don't wrap into anyhting else => It's the main layout of the page

[MarcusNotheis]

Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected components are developed in their repository.

[elenastoyanovaa]

Hello @SAP/ui5-webcomponents-topic-p ,

The reported issue is regarding a broken rendering of a flexible column layout. The issue can be seen in the screenshots and in the code sample provided.

The FCL is placed inside a tab in a Tab Container. Removing the Tab Container resolves the issue. As the FCL is a layout control and promoted in the https://experience.sap.com/fiori-design-web/flexible-column-layout/ as a full screen layout for application, is it correct to place it inside a tab container? Could you please check?

Thanks!

Kind Regards,
Elena

[akirichev]

Hello, @elenastoyanovaa,

Not all applications are following the Fiori Standards, so from a framework perspective, there shouldn't be a limitation. There are a lot of applications in the Tools area that are using horizontal tabs (ex.: Tool Header + Horizontal Tabs).

Best,
Alex

[AndrianStoikov]

Hello @elenastoyanovaa,

I am using the TabContainer as a horizontal navigation, as @akirichev mentioned above.

Best regards,
Andy