[Bug]: Wrapper BasicContentbarWrapper does not keep the state from attached Components

[dahelfi]

Summary

As commented in the headline the BasicContentbarWrapper Objects doesnot keep the state of the attached Component. After the selected Component changes only the selected component is kept inside the DOM as only the selected component is rendered.

So after an Component, that is opened as Tab inside the Contentbar, is reopened as selectedTab, the previous State is not safed as the Component is rerendered as it enters the DOM as a new Component.

Framework version

1.2.0

Steps to reproduce

Give to the attached component inside the BasicContentbarWrapper Object a BackgroundColor that is randomly generated inside the useState Hook. After every new selection of a tab there will be a new backgroundcolor every time, because react handles the component as a new one.

What is the current bug behavior?

Give to the attached component inside the BasicContentbarWrapper Object a BackgroundColor that is randomly generated inside the useState Hook. After every new selection of a tab there will be a new backgroundcolor every time, because react handles the component as a new one.

What is the expected correct behavior?

Randomly generated backgroundcolor (that represents the visual state) is saved inside the component over the whole lifetime. After reselecting a opened Tab the backgroundColor must remain the same.

Relevant logs and/or screenshots

No response

Possible fixes

export const ContentWithBar = (
props: React.PropsWithChildren
) => {
const contentBarStyles = useMemo(() => {
const tempContentbarStyles: ContentBarStylesArray = [];
Object.values(ContentBarStyles).forEach((contentBarStyle) => {
if (props.contentStyle?.appliedStyles?.includes(contentBarStyle)) {
tempContentbarStyles.push(contentBarStyle);
if (contentBarStyle === ContentBarStyles.SET_SPACING_COLOR) {
tempContentbarStyles.push(ContentBarStyles.SPACING);
}
}
});
return tempContentbarStyles;
}, [props.contentStyle]);

return (
<div
className="flex flex-column"
style={{ width: "100%", overflow: "auto" }}
>
{props.contentWrappers.length >= 1 && (

)}

  <div
    className="w-full"
    style={{
      height: "100%",
      overflow: "auto",
    }}
  >
    <ContentLayout
      layoutBehaviour={props.layoutBehaviour}
      contentStyle={props.contentStyle}
    >
      {props.contentWrappers.map((tab) => (
        <div
          key={tab.getId()}
          style={{
            height: "100%",
            display: props.selectedId === tab.getId() ? "block" : "none",
          }}
        >
          {tab.getContentAreaElement()}
        </div>
      ))}
    </ContentLayout>
  </div>
</div>

);
};

remove the calculation of the selectedContentbarWrapper from the useMemo Hook and add the calculation to the return method, as it will be added to the dom. Keep the opened components inside the dom, without rendering them by adding dynamicly different CSS classes as "display: block" and "display: none". As the components are kept inside the DOM React dont handle them as new Components and dont mount them as they are already mounted. So the saved state stays inside the component as expected.

Additional context

No response

[mikewegele]

Hi Daniel, thank you for the input, we have recorded it and created a suitable ticket. :)