Skip to content

Log in collapsible sections cause content to not render #19

@Venefilyn

Description

@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
video

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

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    Status

    Backlog

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions