From 9629d873fbc7b9ee00f31e3da339a72bac2aba23 Mon Sep 17 00:00:00 2001
From: Danielle Maywood <danielle@themaywoods.com>
Date: Wed, 29 Oct 2025 21:11:44 +0000
Subject: [PATCH] fix(site): fix disappearing preset selector when switching
 task template (#20514)

Closes https://github.com/coder/coder/issues/20465

Ensure we set `selectedPresetId` to `undefined` when we change
`selectedTemplateId` to ensure we don't end up breaking the `<Select>`
component by giving it an invalid preset id.
---
 .../tasks/TaskPrompt/TaskPrompt.stories.tsx   | 120 ++++++++++++++++++
 .../modules/tasks/TaskPrompt/TaskPrompt.tsx   |   7 +-
 2 files changed, 126 insertions(+), 1 deletion(-)

diff --git a/site/src/modules/tasks/TaskPrompt/TaskPrompt.stories.tsx b/site/src/modules/tasks/TaskPrompt/TaskPrompt.stories.tsx
index 9572c68c75..8187ec7500 100644
--- a/site/src/modules/tasks/TaskPrompt/TaskPrompt.stories.tsx
+++ b/site/src/modules/tasks/TaskPrompt/TaskPrompt.stories.tsx
@@ -480,3 +480,123 @@ export const CheckExternalAuthOnChangingVersions: Story = {
 		});
 	},
 };
+
+export const CheckPresetsWhenChangingTemplate: Story = {
+	args: {
+		templates: [
+			{
+				...MockTemplate,
+				id: "claude-code",
+				name: "claude-code",
+				display_name: "Claude Code",
+				active_version_id: "claude-code-version",
+			},
+			{
+				...MockTemplate,
+				id: "codex",
+				name: "codex",
+				display_name: "Codex",
+				active_version_id: "codex-version",
+			},
+		],
+	},
+	beforeEach: () => {
+		spyOn(API, "getTemplateVersionPresets").mockImplementation((versionId) => {
+			if (versionId === "claude-code-version") {
+				return Promise.resolve([
+					{
+						...MockPresets[0],
+						ID: "claude-code-preset-1",
+						Name: "Claude Code Dev",
+					},
+				]);
+			}
+			if (versionId === "codex-version") {
+				return Promise.resolve([
+					{
+						...MockPresets[0],
+						ID: "codex-preset-1",
+						Name: "Codex Dev",
+					},
+				]);
+			}
+			return Promise.resolve([]);
+		});
+		spyOn(API, "getTemplateVersions").mockImplementation((templateId) => {
+			if (templateId === "claude-code") {
+				return Promise.resolve([
+					{
+						...MockTemplateVersion,
+						id: "claude-code-version",
+						name: "claude-code-version",
+					},
+				]);
+			}
+			if (templateId === "codex") {
+				return Promise.resolve([
+					{
+						...MockTemplateVersion,
+						id: "codex-version",
+						name: "codex-version",
+					},
+				]);
+			}
+			return Promise.resolve([]);
+		});
+	},
+	play: async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+		const body = within(canvasElement.ownerDocument.body);
+
+		await step("Presets are initially present", async () => {
+			const presetSelect = await canvas.findByLabelText(/preset/i);
+			await userEvent.click(presetSelect);
+
+			const options = await body.findAllByRole("option");
+			expect(options).toHaveLength(1);
+			expect(options[0]).toContainHTML("Claude Code Dev");
+
+			await userEvent.click(options[0]);
+		});
+
+		await step("Switch template", async () => {
+			const templateSelect = await canvas.findByLabelText(/select template/i);
+			await userEvent.click(templateSelect);
+
+			const codexTemplateOption = await body.findByRole("option", {
+				name: /codex/i,
+			});
+			await userEvent.click(codexTemplateOption);
+		});
+
+		await step("Presets are present in new template", async () => {
+			const presetSelect = await canvas.findByLabelText(/preset/i);
+			await userEvent.click(presetSelect);
+
+			const options = await body.findAllByRole("option");
+			expect(options).toHaveLength(1);
+			expect(options[0]).toContainHTML("Codex Dev");
+
+			await userEvent.click(options[0]);
+		});
+
+		await step("Switch template back", async () => {
+			const templateSelect = await canvas.findByLabelText(/select template/i);
+			await userEvent.click(templateSelect);
+
+			const codexTemplateOption = await body.findByRole("option", {
+				name: /claude code/i,
+			});
+			await userEvent.click(codexTemplateOption);
+		});
+
+		await step("Presets are present in original template", async () => {
+			const presetSelect = await canvas.findByLabelText(/preset/i);
+			await userEvent.click(presetSelect);
+
+			const options = await body.findAllByRole("option");
+			expect(options).toHaveLength(1);
+			expect(options[0]).toContainHTML("Claude Code Dev");
+		});
+	},
+};
diff --git a/site/src/modules/tasks/TaskPrompt/TaskPrompt.tsx b/site/src/modules/tasks/TaskPrompt/TaskPrompt.tsx
index e0afb9cf7d..77e338cd47 100644
--- a/site/src/modules/tasks/TaskPrompt/TaskPrompt.tsx
+++ b/site/src/modules/tasks/TaskPrompt/TaskPrompt.tsx
@@ -269,7 +269,12 @@ const CreateTaskForm: FC<CreateTaskFormProps> = ({ templates, onSuccess }) => {
 							</label>
 							<Select
 								name="templateID"
-								onValueChange={(value) => setSelectedTemplateId(value)}
+								onValueChange={(value) => {
+									setSelectedTemplateId(value);
+									if (value !== selectedTemplateId) {
+										setSelectedPresetId(undefined);
+									}
+								}}
 								defaultValue={templates[0].id}
 								required
 							>