Skip to content

Fix log groups collapsing on auto-refresh in Logs view#65378

Merged
pierrejeambrun merged 1 commit into
apache:v2-11-testfrom
astronomer:fix/log-groups-collapse-on-refresh
Apr 16, 2026
Merged

Fix log groups collapsing on auto-refresh in Logs view#65378
pierrejeambrun merged 1 commit into
apache:v2-11-testfrom
astronomer:fix/log-groups-collapse-on-refresh

Conversation

@pierrejeambrun

@pierrejeambrun pierrejeambrun commented Apr 16, 2026

Copy link
Copy Markdown
Member

Fix log groups (::group::) auto-collapsing whenever the UI auto-refreshes
or the user scrolls the log area.

  1. LogBlock.onClick mutated the unfoldedGroups array in-place (.push,
    .splice) then passed the same reference to setState. React 19
    uses strict Object.is comparison — same reference means the state
    update is silently discarded, so useMemo never recalculates the
    parsed logs with the correct unfolded state.

  2. Chakra UI Tabs with isLazy defaults to lazyBehavior="unmount",
    which unmounts inactive tab panels. Any remount resets useState([])
    to empty, losing the unfolded groups entirely.

Fix:

  • Use immutable state updates ([...prev, gId] / prev.filter(...))
    so React detects the state change.
  • Add lazyBehavior="keepMounted" to the Tabs so panels preserve state
    once rendered (still lazy on initial load).

Before

Screen.Recording.2026-04-16.at.18.26.20.mov

After

Screen.Recording.2026-04-16.at.18.23.03.mov

Was generative AI tooling used to co-author this PR?
  • Yes — Claude Code (Opus 4.6)

Generated-by: Claude Code (Opus 4.6) following the guidelines

Log group sections (::group::) were auto-collapsing whenever the UI
auto-refreshed or the user scrolled. Two issues combined to cause this:

1. LogBlock.onClick mutated the unfoldedGroups array in-place (.push,
   .splice) then passed the same reference to setState. React uses
   Object.is for state comparison — same reference means the update is
   silently discarded. This worked by accident in React 18 but broke
   after the React 19 upgrade (7d4c79b).

2. Chakra UI Tabs with isLazy (default lazyBehavior="unmount") unmounts
   inactive panels, resetting all component state on remount.

Fix: use immutable state updates (spread/filter to create new arrays)
so React properly detects changes, and add lazyBehavior="keepMounted"
so tab panels preserve their state once rendered.

closes: apache#65200
@bbovenzi bbovenzi added area:UI Related to UI/UX. For Frontend Developers. backport-to-v3-2-test labels Apr 16, 2026
@bbovenzi bbovenzi modified the milestone: Airflow 3.2.2 Apr 16, 2026
@pierrejeambrun pierrejeambrun merged commit ff31753 into apache:v2-11-test Apr 16, 2026
41 checks passed
@pierrejeambrun pierrejeambrun deleted the fix/log-groups-collapse-on-refresh branch April 16, 2026 21:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:UI Related to UI/UX. For Frontend Developers.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants