ui5-webcomponents
ui5-webcomponents copied to clipboard
fix(ui5-flexible-column-layout): prevent layout issue
Fixes: https://github.com/SAP/ui5-webcomponents/issues/11694
To reproduce the issue on the internal test page:
- On fiori/test/pages/FCL.html, disable the animation (e.g. using the newly added switch)
- Resize the column on any FCL instance on the page that is given a two-columns layout (only begin and mid columns visible) Expected: The columns are resized but the FCL remains in two-column layout Actual: an empty end column becomes visible (and its width is the same as the min-width assigned from the CSS)
Problem description:
- The CSS class
ui5-fcl-column--hiddenused to be added only from theFlexibleColumnLayout.ts(i.e. after rendering the component) and never from the template itself (i.e. never during rendering). - This was required to ensure that the
ui5-fcl-column--hiddenclass is added only after the collapse animation has ended (to prevent premature collapse) - However, since the
ui5-fcl-column--hiddenclass is never added from the template itself, it is lost on each re-rendering => the issue https://github.com/SAP/ui5-webcomponents/issues/11694 showed a use-case where the component is rerendered (thus theui5-fcl-column--hiddenclass is lost) but the logic to add it back (fromFlexibleColumnLayout.ts) is skipped because no changes to the layout of the given column were made neither on app-side nor by user-interaction
Solution:
Fixed by ensuring that the ui5-fcl-column--hidden class is added from the template itself is all cases except when collapse animation in progress (to satisfy the case described in point 2 above)