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

Aperta
  • Qualcosa non va?
#382 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
45/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
nextjs, playwright, react, typescript
Ambito
frontend, testing

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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

Lingua principale
TypeScript
Stelle
1
Fork
1
Merge medio
6h 56m
PR unite (30g)
136

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di eddiejaoude/StackDash

Tutte le issue di eddiejaoude/StackDash

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.