-
Notifications
You must be signed in to change notification settings - Fork 16
Description
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 Card
s 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
Metadata
Metadata
Assignees
Labels
Type
Projects
Status