From 0db5dd126c1a0bb789798fed95ec5bb5e3e717a2 Mon Sep 17 00:00:00 2001 From: Bryan Van Deusen Date: Tue, 24 Mar 2026 01:05:12 -0400 Subject: [PATCH] fix(task-viewer): esc capture phase to prevent App.vue handler conflict Register the Esc keydown listener in capture phase (useCapture=true) and call stopPropagation() so App.vue's document-level handler never fires. Without this, both handlers ran: App.vue pushed "/" and the component pushed "/projects/:id", with non-deterministic winner. Also fixes the blur-then-navigate issue where App.vue blurring an input caused the component's handler to see body as the active element and navigate immediately instead of stopping at the blur step. Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/views/TaskViewerView.vue | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/frontend/src/views/TaskViewerView.vue b/frontend/src/views/TaskViewerView.vue index cbe391a..39adee4 100644 --- a/frontend/src/views/TaskViewerView.vue +++ b/frontend/src/views/TaskViewerView.vue @@ -96,8 +96,12 @@ async function loadTask(id: number) { function handleKeydown(e: KeyboardEvent) { if (e.key !== "Escape") return; + e.stopPropagation(); // prevent App.vue's global handler from also firing const active = document.activeElement as HTMLElement | null; - if (active && active !== document.body) { active.blur(); return; } + if (active && active !== document.body) { + (active as HTMLElement).blur(); + return; + } if (store.currentTask?.project_id) { router.push(`/projects/${store.currentTask.project_id}`); } else { @@ -107,9 +111,10 @@ function handleKeydown(e: KeyboardEvent) { onMounted(() => { loadTask(taskId.value); - window.addEventListener("keydown", handleKeydown); + // Capture phase so this fires before App.vue's document-level handler + window.addEventListener("keydown", handleKeydown, true); }); -onUnmounted(() => window.removeEventListener("keydown", handleKeydown)); +onUnmounted(() => window.removeEventListener("keydown", handleKeydown, true)); watch(() => route.params.id, (newId) => { if (newId) loadTask(Number(newId));