fix: select the correct version when template changes (#20293)

Fix https://github.com/coder/internal/issues/1062

site/src/modules/tasks/TaskPrompt/TaskPrompt.stories.tsx

@@ -30,15 +30,6 @@ const meta: Meta<typeof TasksPage> = {
 	},
 	beforeEach: () => {
 		spyOn(API, "getTemplateVersionExternalAuth").mockResolvedValue([]);
-		spyOn(API, "getTemplates").mockResolvedValue([
-			MockTemplate,
-			{
-				...MockTemplate,
-				id: "test-template-2",
-				name: "template 2",
-				display_name: "Template 2",
-			},
-		]);
 		spyOn(API, "getTemplateVersions").mockResolvedValue([
 			{
 				...MockTemplateVersion,
@@ -126,6 +117,70 @@ export const OnSuccess: Story = {
 	},
 };
 
+export const ChangeTemplate: Story = {
+	decorators: [withGlobalSnackbar],
+	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, "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([]);
+		});
+		spyOn(API.experimental, "createTask").mockResolvedValue(MockTask);
+	},
+	play: async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+		const body = within(canvasElement.ownerDocument.body);
+
+		await step("Change template", async () => {
+			const templateSelect = await canvas.findByLabelText(/select template/i);
+			await userEvent.click(templateSelect);
+			const templateOption = await body.findByRole("option", {
+				name: /codex/i,
+			});
+			await userEvent.click(templateOption);
+		});
+
+		await step("Default version is selected", async () => {
+			const versionSelect = await canvas.findByLabelText(/version/i);
+			expect(versionSelect).toHaveTextContent("codex-version");
+		});
+	},
+};
+
 export const SelectTemplateVersion: Story = {
 	decorators: [withGlobalSnackbar],
 	beforeEach: () => {

site/src/modules/tasks/TaskPrompt/TaskPrompt.tsx

@@ -165,6 +165,9 @@ const CreateTaskForm: FC<CreateTaskFormProps> = ({ templates, onSuccess }) => {
 		...templateVersions(selectedTemplate.id),
 		enabled: permissions.updateTemplates,
 	});
+	useEffect(() => {
+		setSelectedVersionId(selectedTemplate.active_version_id);
+	}, [selectedTemplate]);
 
 	// Presets
 	const { data: presets, isLoading: isLoadingPresets } = useQuery(
@@ -269,7 +272,7 @@ const CreateTaskForm: FC<CreateTaskFormProps> = ({ templates, onSuccess }) => {
 					<div className="flex items-center gap-1">
 						<div>
 							<label htmlFor="templateID" className="sr-only">
-								Template
+								Select template
 							</label>
 							<Select
 								name="templateID"
@@ -326,7 +329,7 @@ const CreateTaskForm: FC<CreateTaskFormProps> = ({ templates, onSuccess }) => {
 								Preset
 							</label>
 							{isLoadingPresets ? (
-								<Skeleton className="w-[320px] h-8" />
+								<Skeleton className="w-[140px] h-8 rounded-full" />
 							) : (
 								presets &&
 								presets.length > 0 &&