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

Abierto
  • ¿Algo no está bien?
#382 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
45/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
nextjs, playwright, react, typescript
Área
frontend, testing

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
TypeScript
Estrellas
1
Forks
1
Merge medio
6 h 56 min
PR fusionados (30 d)
136

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de eddiejaoude/StackDash

Todos los issues de eddiejaoude/StackDash

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.