diff --git a/canvas/src/components/__tests__/OrgTemplatesSection.test.tsx b/canvas/src/components/__tests__/OrgTemplatesSection.test.tsx
index a30f636c..f464036a 100644
--- a/canvas/src/components/__tests__/OrgTemplatesSection.test.tsx
+++ b/canvas/src/components/__tests__/OrgTemplatesSection.test.tsx
@@ -1,4 +1,5 @@
 // @vitest-environment jsdom
+
 /**
  * Tests for OrgTemplatesSection — collapsible org template import list.
  *
@@ -78,6 +79,7 @@ afterEach(() => {
   cleanup();
 });
 
+
 async function expandSection() {
   const toggle = (await screen.findAllByRole("button")).find(
     (b) => b.getAttribute("aria-controls") === "org-templates-body"
@@ -110,6 +112,7 @@ describe("OrgTemplatesSection — collapse/expand", () => {
     expect(screen.getByText("MeDo Smoke Test")).toBeTruthy();
   });
 
+
   it("clicking header again collapses back", async () => {
     render(<OrgTemplatesSection />);
     await expandSection();
@@ -124,6 +127,7 @@ describe("OrgTemplatesSection — collapse/expand", () => {
     expect(screen.queryByText("Free Beats All")).toBeNull();
   });
 
+
   it("count badge appears after load", async () => {
     render(<OrgTemplatesSection />);
     const toggle = (await screen.findAllByRole("button")).find(
diff --git a/canvas/src/components/settings/UnsavedChangesGuard.tsx b/canvas/src/components/settings/UnsavedChangesGuard.tsx
index 03d8e1bf..251ab7c7 100644
--- a/canvas/src/components/settings/UnsavedChangesGuard.tsx
+++ b/canvas/src/components/settings/UnsavedChangesGuard.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useRef } from 'react';
 import * as AlertDialog from '@radix-ui/react-alert-dialog';
 
 interface UnsavedChangesGuardProps {
@@ -15,16 +16,30 @@ interface UnsavedChangesGuardProps {
  * - Shown when closing panel while a form has unsaved input
  * - NOT shown if the form is empty (opened but nothing typed)
  * - Focus-trapped (AlertDialog)
+ *
+ * Uses pendingDiscard ref so fireEvent.click on asChild Action can drive
+ * which callback fires — avoids needing eslint-disable / explicit onClick.
  */
 export function UnsavedChangesGuard({
   open,
   onKeepEditing,
   onDiscard,
 }: UnsavedChangesGuardProps) {
+  const pendingDiscard = useRef(false);
+
   return (
     <AlertDialog.Root
       open={open}
-      onOpenChange={(o) => { if (!o) onKeepEditing(); }}
+      onOpenChange={(o) => {
+        if (!o) {
+          if (pendingDiscard.current) {
+            pendingDiscard.current = false;
+            onDiscard();
+          } else {
+            onKeepEditing();
+          }
+        }
+      }}
     >
       <AlertDialog.Portal>
         <AlertDialog.Overlay className="guard-dialog__overlay" />
@@ -48,7 +63,7 @@ export function UnsavedChangesGuard({
               <button
                 type="button"
                 className="guard-dialog__discard-btn"
-                onClick={(e) => { e.stopPropagation(); onDiscard(); }}
+                onClick={() => { pendingDiscard.current = true; }}
               >
                 Discard
               </button>