LogViewer does not initialize styles correctly when its container is hidden on first render (e.g. within the TabContent for a tab that is not initially selected)
まだ誰も着手していません。
評価
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 初心者へのやさしさ
- 45/100
- issue の種類
- バグ
- 明瞭さ
- おおむね明確
- 活発さ
- 停滞
- 技術スタック
- react, typescript
- 領域
- frontend
調査の方向性
Start in packages/module/src/LogViewer/LogViewer.tsx, especially createList around the containerRef.current.clientHeight and clientWidth usage. Reproduce the problem with the docs example by initially hiding the LogViewer wrapper, then verify that the list receives correct dimensions when the wrapper becomes visible without a window resize.
索引モデルが issue の本文から書いたものです。
説明
Found while investigating a bug that came up in https://github.com/opendatahub-io/odh-dashboard/pull/2184#discussion_r1399121417 . See related Slack discussion here (Red Hat internal).
We have a set of Tabs with TabContent components. They are rendered the standard way, where all TabContents are rendered regardless of which is active and the non-active tabs get a hidden attribute in the DOM.
One of the tabs which is not the default (its first render gets that hidden attribute) contains a LogViewer. When we switch to the Logs tab and the LogViewer's container becomes visible, the LogViewer's contents appear empty until something else triggers a re-render (such as resizing the window). However, if we change the code so that the Logs tab is the default tab (the LogViewer's first render is in a container that is not hidden), it works as expected.
This appears to be happening because of the way containerRef.current.clientHeight and .clientWidth are used in the createList function here. clientHeight and clientWidth resolve to 0 for hidden elements, so the List gets rendered with 0 height and 0 width. The container changing from hidden to non-hidden does not trigger a re-render in the LogViewer, so the List only gets its height and width set correctly when createList is called again after something else triggers a re-render.
One possible solution to this would be to add some kind of listener or observer that can detect that the containerRef.current element has become visible and have it trigger a re-render similarly to how resizing the window does. This could be done with an IntersectionObserver as described in this blog post.
I was able to reproduce the bug in the docs example here by opening the source of the basic example and editing it to have an additional "hidden" checkbox which defaults to true and applies a hidden attribute on a <div> wrapping the LogViewer. I would link a CodeSandbox showing this but it appears the sandbox generator on the site is broken (at least for this example). Adding an IntersectionObserver in the console while reproducing it in this way, I can detect that visibility changing.
Jira Issue: PF-2013
- 主要言語
- TypeScript
- スター
- 34
- フォーク
- 19
- PR マージ指標
- 30日以内にマージされた PR はありません
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートなし
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
patternfly/react-log-viewer のほかの issue
-
Search within Log viewer can cause the parent container to shift and break the layout, when embedded in a scrollable parent対応中かも @fao89 が 136 日前に担当しました。 オープン
難易度 3/5 1〜2日 初心者へのやさしさ 67/100
patternfly/react-log-viewer#106 ·
-
難易度 3/5 1〜2日 初心者へのやさしさ 45/100
patternfly/react-log-viewer#101 ·
-
難易度 3/5 1〜2日 初心者へのやさしさ 25/100
patternfly/react-log-viewer#98 · コメント 1 件 ·
-
難易度 3/5 1〜2日 初心者へのやさしさ 25/100
patternfly/react-log-viewer#95 · コメント 2 件 ·
-
難易度 3/5 1〜2日 初心者へのやさしさ 35/100
patternfly/react-log-viewer#91 · コメント 1 件 ·
patternfly/react-log-viewer の issue をすべて見る