Log in collapsible sections cause content to not render

[Venefilyn]

When using the LogViewer within an ExpandableSection component it might not render correctly. Assigning a ref to the LogViewer makes it happen even more often.

Here is a sandbox setup with a ref that showcases that issue https://codesandbox.io/s/focused-hooks-m95046?file=/index.tsx

Here is a video of it happening for me in Storybook using ref

Here is a picture of it happening with two nested Cards and one ExpandableSection, without ref

Comment from Juntao Wang from PatternFly Slack

Hi, this is definitely a bug in the react-log-viewer, could you please create an issue in https://github.com/patternfly/react-log-viewer/issues? it’s a little bit tricky because the styles are setting everywhere and seems there are some render problems when using the log viewer with the expandable sections. it will not render correctly when the section is hidden for the first time. The current workaround is creating a custom component that wraps the LogViewer and setting the ref there, and use React.memo on the whole component. Finally, set that component as the child in the ExpandableSection . However, in this situation, you may need to set the initial state of the isExpanded to true to make the initial render correctly. I will be on PTO starting tomorrow for ~10 days so I might not have time to do a deeper investigation into this issue but I will check it again after I am back to see if I could find anything. Could you also take a look on this issue when you are available