diff --git a/src/app/(protected)/settings/_components/task-templates/task-template-detail-form.tsx b/src/app/(protected)/settings/_components/task-templates/task-template-detail-form.tsx
index 889be812..301195ed 100644
--- a/src/app/(protected)/settings/_components/task-templates/task-template-detail-form.tsx
+++ b/src/app/(protected)/settings/_components/task-templates/task-template-detail-form.tsx
@@ -1,7 +1,10 @@
 import type { UseFormReturn } from "react-hook-form";
 import { Box, Button, Paper, Stack, TextField, Typography } from "@mui/material";
 import { TASK_TEMPLATE_COPY } from "@/domain/settings/task-templates/constants/task-template-constants";
-import type { TaskTemplateFormValues } from "@/domain/settings/task-templates/types/task-template";
+import type {
+  SelectedTaskTemplateId,
+  TaskTemplateFormValues,
+} from "@/domain/settings/task-templates/types/task-template";
 import { TaskTemplateItemsField } from "./task-template-items-field";
 
 function getSubmitLabel(isSaving: boolean, isNew: boolean): string {
@@ -14,6 +17,7 @@ interface TaskTemplateDetailFormProps {
   isNew: boolean;
   isSelected: boolean;
   isSaving: boolean;
+  selectedId: SelectedTaskTemplateId;
   onDelete: () => void;
   onSubmit: () => void;
 }
@@ -23,6 +27,7 @@ export function TaskTemplateDetailForm({
   isNew,
   isSelected,
   isSaving,
+  selectedId,
   onDelete,
   onSubmit,
 }: TaskTemplateDetailFormProps) {
@@ -69,7 +74,7 @@ export function TaskTemplateDetailForm({
             />
           </Stack>
 
-          <TaskTemplateItemsField control={control} />
+          <TaskTemplateItemsField key={String(selectedId)} control={control} />
 
           <Stack direction="row" spacing={2} sx={{ justifyContent: "flex-end" }}>
             {!isNew && (
diff --git a/src/app/(protected)/settings/task-templates.tsx b/src/app/(protected)/settings/task-templates.tsx
index f368d828..bbc98752 100644
--- a/src/app/(protected)/settings/task-templates.tsx
+++ b/src/app/(protected)/settings/task-templates.tsx
@@ -53,6 +53,7 @@ export default function TaskTemplatesPage() {
           isNew={isNew}
           isSelected={selectedId !== null}
           isSaving={isSaving}
+          selectedId={selectedId}
           onDelete={requestDelete}
           onSubmit={submitForm}
         />
diff --git a/src/test/app/(protected)/settings/task-templates.test.tsx b/src/test/app/(protected)/settings/task-templates.test.tsx
index 785185c8..eb57b26e 100644
--- a/src/test/app/(protected)/settings/task-templates.test.tsx
+++ b/src/test/app/(protected)/settings/task-templates.test.tsx
@@ -16,6 +16,14 @@ const existingTemplate: TaskTemplate = {
   ],
 };
 
+const secondTemplate: TaskTemplate = {
+  id: "9",
+  name: "Plumbing Inspection",
+  description: "Basic checklist",
+  isActive: true,
+  items: [{ itemText: "Check for leaks", sortOrder: 0 }],
+};
+
 afterEach(() => {
   vi.restoreAllMocks();
 });
@@ -88,6 +96,38 @@ describe("TaskTemplatesPage", () => {
     ]);
   });
 
+  it("clears the unsaved add-item draft when switching to a different template", async () => {
+    renderPage([existingTemplate, secondTemplate]);
+    fireEvent.click(await screen.findByText("HVAC Inspection"));
+    await screen.findByText("Checklist Items (2)");
+
+    fireEvent.change(screen.getByPlaceholderText("Add checklist item..."), {
+      target: { value: "Check filter" },
+    });
+    expect(screen.getByPlaceholderText("Add checklist item...")).toHaveValue("Check filter");
+
+    fireEvent.click(screen.getByText("Plumbing Inspection"));
+
+    await screen.findByText("Checklist Items (1)");
+    expect(screen.getByPlaceholderText("Add checklist item...")).toHaveValue("");
+  });
+
+  it("clears the unsaved add-item draft when starting a new template", async () => {
+    renderPage();
+    fireEvent.click(await screen.findByText("HVAC Inspection"));
+    await screen.findByText("Checklist Items (2)");
+
+    fireEvent.change(screen.getByPlaceholderText("Add checklist item..."), {
+      target: { value: "Check filter" },
+    });
+    expect(screen.getByPlaceholderText("Add checklist item...")).toHaveValue("Check filter");
+
+    fireEvent.click(screen.getByRole("button", { name: "+ New Template" }));
+
+    await screen.findByText("Checklist Items (0)");
+    expect(screen.getByPlaceholderText("Add checklist item...")).toHaveValue("");
+  });
+
   it("moves an item up and down without changing the item count", async () => {
     renderPage();
     fireEvent.click(await screen.findByText("HVAC Inspection"));