apache/airflow

UI: Unpin @chakra-ui/react (currently capped at ~3.34.0)

Closed

#67,647 opened on May 28, 2026

 (3 comments) (0 reactions) (0 assignees)Python (16,781 forks)batch import
area:UIgood first issue

Repository metrics

Stars
 (44,809 stars)
PR merge metrics
 (Avg merge 7d 18h) (834 merged PRs in 30d)

Description

Background

PR #67646 capped @chakra-ui/react at ~3.34.0 (patch only) because the 3.35 bump pulled in @ark-ui/react >=5.36 and triggered a page-unresponsive bug after closing any Clear / Mark-as dialog without confirming. (Or even after successfully submitting I believe)

Per Ark UI's 5.36.0 release notes:

Dialog / Drawer: Avoid setting inline pointer-events when modal, letting the dismissable layer manage it.

The cleanup moved from an inline DOM style (which disappeared on unmount) to the dismissable layer's close-transition callback. Several buttons in this codebase mount their dialog conditionally ({open ? <Dialog .../> : undefined}), which unmounts the dialog before the close transition runs and leaves the pointer-events: none lock stuck on document.

What needs doing

Unpin @chakra-ui/react so we can pick up 3.35+ and future Ark UI fixes. To do so safely the conditional-mount sites must be rewritten first.

  1. Go over all the Run/TI actions (clear, mark as, delete, etc...) and verify that after cancelling and confirming the UI remains usable. Without any fix the UI will not respond to mouse click on buttons anywhere in the page.

  2. Bump @chakra-ui/react to ^3.35.0 (or latest) in airflow-core/src/airflow/ui/package.json and remove the Dependency upgrade caveats section in airflow-core/src/airflow/ui/CONTRIBUTING.md.

Note!: The pattern that unmounts the modals was done on purpose so the 'note' value would 'reset' to the TI / Run note when re-opened again. We didn't want to fix #47071 and we don't want a regression on that front.

Affected files

Parent buttons / headers that need to drop the {open ? <Dialog/> : undefined} wrapping:

  • airflow-core/src/airflow/ui/src/components/Clear/Run/ClearRunButton.tsx
  • airflow-core/src/airflow/ui/src/components/Clear/TaskInstance/ClearTaskInstanceButton.tsx (three discriminator branches)
  • airflow-core/src/airflow/ui/src/components/MarkAs/Run/MarkRunAsButton.tsx
  • airflow-core/src/airflow/ui/src/components/MarkAs/TaskInstance/MarkTaskInstanceAsButton.tsx
  • airflow-core/src/airflow/ui/src/pages/TaskInstance/Header.tsx

Dialogs themselves (will need a handleClose and possibly an enabled: open on a dry-run query):

  • airflow-core/src/airflow/ui/src/components/Clear/Run/ClearRunDialog.tsx
  • airflow-core/src/airflow/ui/src/components/Clear/TaskInstance/ClearTaskInstanceDialog.tsx
  • airflow-core/src/airflow/ui/src/components/MarkAs/Run/MarkRunAsDialog.tsx
  • airflow-core/src/airflow/ui/src/components/MarkAs/TaskInstance/MarkTaskInstanceAsDialog.tsx

How to verify

  1. Open any Clear or Mark-as dialog from the Dag Runs list, the Task Instances list, or the per-run / per-TI detail pages.
  2. Close the dialog without confirming (X button, Escape, or click the backdrop).
  3. The rest of the page must still be clickable. Scroll alone isn't enough — links, buttons, and table rows must respond.
  4. Repeat after a confirmed action (Confirm + close on success) — same expectation.
  5. Reopen the same dialog: the note field should show the run/TI's note value, not whatever you typed before cancelling.

Contributor guide