ConfirmDialog's openDialogCount FIX

src/components/ConfirmDialog.test.tsx

@@ -1,6 +1,14 @@
-import { describe, it, expect, vi } from "vitest";
+import { describe, it, expect, vi, afterEach } from "vitest";
 import { render, screen, fireEvent } from "@testing-library/react";
 import { ConfirmDialog } from "./ConfirmDialog";
+import {
+  isConfirmDialogOpen,
+  resetConfirmDialogOpenState,
+} from "./confirmDialogOpenState";
+
+afterEach(() => {
+  resetConfirmDialogOpenState();
+});
 
 describe("ConfirmDialog", () => {
   it("renders nothing when closed", () => {
@@ -31,6 +39,24 @@ describe("ConfirmDialog", () => {
     expect(screen.getByText('Deactivate anchor "a"?')).toBeInTheDocument();
   });
 
+  it("clears the tracked open-dialog state when unmounted while open", () => {
+    const { unmount } = render(
+      <ConfirmDialog
+        open
+        title="Deactivate anchor"
+        message='Deactivate anchor "a"?'
+        onConfirm={() => {}}
+        onCancel={() => {}}
+      />,
+    );
+
+    expect(isConfirmDialogOpen()).toBe(true);
+
+    unmount();
+
+    expect(isConfirmDialogOpen()).toBe(false);
+  });
+
   it("uses default button labels unless overridden", () => {
     render(
       <ConfirmDialog
@@ -191,7 +217,9 @@ describe("ConfirmDialog", () => {
         onCancel={onCancel}
       />,
     );
-    fireEvent.click(screen.getByRole("alertdialog").parentElement as HTMLElement);
+    fireEvent.click(
+      screen.getByRole("alertdialog").parentElement as HTMLElement,
+    );
     expect(onCancel).toHaveBeenCalledTimes(1);
   });
 

src/components/ConfirmDialog.tsx

@@ -28,14 +28,18 @@ export function ConfirmDialog({
   const confirmRef = useRef<HTMLButtonElement>(null);
   const triggerRef = useRef<HTMLElement | null>(null);
 
-  // Capture the currently focused element when dialog opens
+  // Capture the currently focused element when dialog opens, and keep the
+  // module-level open-dialog counter balanced if this component unmounts while
+  // still open (for example, during navigation away from the current route).
   useEffect(() => {
-    if (open) {
-      triggerRef.current = document.activeElement as HTMLElement;
-      markConfirmDialogOpen();
-    } else {
+    if (!open) return;
+
+    triggerRef.current = document.activeElement as HTMLElement;
+    markConfirmDialogOpen();
+
+    return () => {
       markConfirmDialogClosed();
-    }
+    };
   }, [open]);
 
   // Focus management

src/hooks/useFocusShortcut.test.ts

@@ -100,6 +100,40 @@ describe("useFocusShortcut", () => {
     document.body.removeChild(outsideButton);
   });
 
+  it("focuses the target element after an open confirm dialog unmounts during navigation", () => {
+    const searchInput = document.createElement("input");
+    const outsideButton = document.createElement("button");
+    document.body.appendChild(searchInput);
+    document.body.appendChild(outsideButton);
+    outsideButton.focus();
+
+    const ref = createRef<HTMLInputElement>();
+    ref.current = searchInput;
+
+    renderHook(() => useFocusShortcut("/", ref));
+    const dialog = render(
+      createElement(ConfirmDialog, {
+        open: true,
+        title: "Deactivate anchor",
+        message: "Are you sure?",
+        onConfirm: () => {},
+        onCancel: () => {},
+      }),
+    );
+
+    pressKey("/");
+    expect(document.activeElement).toBe(screen.getByText("Cancel"));
+
+    dialog.unmount();
+
+    outsideButton.focus();
+    pressKey("/");
+    expect(document.activeElement).toBe(searchInput);
+
+    document.body.removeChild(searchInput);
+    document.body.removeChild(outsideButton);
+  });
+
   it("when multiple instances are bound to the same key, the last mounted instance retains focus", () => {
     const input1 = document.createElement("input");
     const input2 = document.createElement("input");