fix(web): close open dialogs when a route is hidden

Đang mở
  • Có gì không ổn?
#382 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
45/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
nextjs, playwright, react, typescript
Lĩnh vực
frontend, testing

Hướng nghiên cứu

Start with the timeline-only fix already merged for #380 in src/components/timeline/event-inspector.tsx, then read src/components/ui/modal-dialog.tsx and src/components/ui/dialog-controller.ts to see where a useLayoutEffect cleanup could close the native <dialog> on hide. Read the Next guide section the issue cites on preserving UI state before trusting that effects are torn down. Done means an e2e spec covering one caller passes and the timeline workaround is removed.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

area: web bug priority: P3 size: S

Context

Raised in the Fable review of PR #378 (thread https://github.com/eddiejaoude/DevMacro/pull/378#discussion_r4560190412). cacheComponents is on (next.config.ts:38), so Next hides a route it navigates away from with <Activity> (display: none) and keeps its DOM state, dialogs included (node_modules/next/dist/docs/01-app/02-guides/preserving-ui-state.md, section "Dialog and initialization logic"). Effects are torn down on hide, and ModalDialog (src/components/ui/modal-dialog.tsx) and the dialog controller (src/components/ui/dialog-controller.ts) have no cleanup that closes the native <dialog>. The reviewer confirmed in Chromium and WebKit that an open modal <dialog> under a display: none ancestor keeps the rest of the document inert, so nothing outside it can be clicked or focused.

PR #378 fixes this only for the timeline event inspector (#380). Every other ModalDialog caller still has the gap: src/app/w/[workspace]/settings/api-keys.tsx, src/app/w/[workspace]/settings/workspace-handle-form.tsx, src/components/alerts/confirm-delete.tsx, src/components/app/command-palette.tsx, src/components/connections/connection-controls.tsx, src/components/projects/delete-project-dialog.tsx, src/components/public-metrics/publication-controls.tsx, src/components/public-metrics/share-dialog.tsx.

Not reproduced in the app yet. Likely paths: a multi-entry history jump from the Back menu while a dialog is open, or a router.refresh() that redirects while a dialog is open.

Plan

  1. Reproduce with Playwright: open a dialog, navigate away so the route is hidden rather than unmounted, and check that the next page is interactive.
  2. Close the native dialog on hide in the shared primitive (a useLayoutEffect cleanup in ModalDialog or the controller), so every caller gets it.
  3. Remove the timeline-only fix from src/components/timeline/event-inspector.tsx once the primitive covers it.

Acceptance criteria

  • Navigating away with any ModalDialog open leaves the next page fully interactive.
  • Returning to the route does not leave a stale open dialog, and URL-driven dialogs reopen from the URL.
  • Playwright e2e covers one representative dialog.

Files and areas

src/components/ui/modal-dialog.tsx, src/components/ui/dialog-controller.ts, their unit tests, one e2e spec. Non-goals: redesigning dialogs, changing focus-restoration rules.

Verification

To be filled in by the implementing chat.

Branch: <issue-number>-modal-close-on-hide
Closes with a Closes #<issue-number> footer on the commit or pull request.

Model: anthropic/claude-opus-5-5 | Reasoning effort: not exposed by harness

Ngôn ngữ chính
TypeScript
Star
1
Fork
1
Merge trung bình
6 giờ 56 phút
Pull request đã merge (30 ngày)
136

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của eddiejaoude/StackDash

Tất cả issue của eddiejaoude/StackDash

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.