feat: Add cmd+enter to submit tasks immediately

bpmct · claude · bpmct · commit 5b95d533e8e2 · 2025-12-09T01:07:13.000Z
Implements cmd+enter (Mac) / ctrl+enter (Windows/Linux) keyboard shortcut for submitting new tasks on the tasks page. Regular enter still creates a new line in the textarea. Fixes #21179 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
diff --git a/site/src/modules/tasks/TaskPrompt/TaskPrompt.test.tsx b/site/src/modules/tasks/TaskPrompt/TaskPrompt.test.tsx
@@ -0,0 +1,128 @@
+import { fireEvent } from "@testing-library/react";
+import type { TextareaAutosizeProps } from "react-textarea-autosize";
+
+// Test the keyboard handler logic directly
+describe("TaskPrompt - Cmd+Enter behavior", () => {
+	test("calls form.requestSubmit when cmd+enter is pressed (Mac)", () => {
+		const mockForm = {
+			requestSubmit: vi.fn(),
+		};
+
+		const mockTextarea = {
+			closest: vi.fn().mockReturnValue(mockForm),
+		};
+
+		const mockEvent = {
+			key: "Enter",
+			metaKey: true,
+			ctrlKey: false,
+			preventDefault: vi.fn(),
+			currentTarget: mockTextarea,
+		} as unknown as React.KeyboardEvent<HTMLTextAreaElement>;
+
+		// Simulate the handler logic from PromptTextarea
+		if (mockEvent.key === "Enter" && (mockEvent.metaKey || mockEvent.ctrlKey)) {
+			mockEvent.preventDefault();
+			const form = mockEvent.currentTarget.closest("form");
+			if (form) {
+				form.requestSubmit();
+			}
+		}
+
+		expect(mockEvent.preventDefault).toHaveBeenCalled();
+		expect(mockTextarea.closest).toHaveBeenCalledWith("form");
+		expect(mockForm.requestSubmit).toHaveBeenCalled();
+	});
+
+	test("calls form.requestSubmit when ctrl+enter is pressed (Windows/Linux)", () => {
+		const mockForm = {
+			requestSubmit: vi.fn(),
+		};
+
+		const mockTextarea = {
+			closest: vi.fn().mockReturnValue(mockForm),
+		};
+
+		const mockEvent = {
+			key: "Enter",
+			metaKey: false,
+			ctrlKey: true,
+			preventDefault: vi.fn(),
+			currentTarget: mockTextarea,
+		} as unknown as React.KeyboardEvent<HTMLTextAreaElement>;
+
+		// Simulate the handler logic from PromptTextarea
+		if (mockEvent.key === "Enter" && (mockEvent.metaKey || mockEvent.ctrlKey)) {
+			mockEvent.preventDefault();
+			const form = mockEvent.currentTarget.closest("form");
+			if (form) {
+				form.requestSubmit();
+			}
+		}
+
+		expect(mockEvent.preventDefault).toHaveBeenCalled();
+		expect(mockTextarea.closest).toHaveBeenCalledWith("form");
+		expect(mockForm.requestSubmit).toHaveBeenCalled();
+	});
+
+	test("does not submit when only enter is pressed", () => {
+		const mockForm = {
+			requestSubmit: vi.fn(),
+		};
+
+		const mockTextarea = {
+			closest: vi.fn().mockReturnValue(mockForm),
+		};
+
+		const mockEvent = {
+			key: "Enter",
+			metaKey: false,
+			ctrlKey: false,
+			preventDefault: vi.fn(),
+			currentTarget: mockTextarea,
+		} as unknown as React.KeyboardEvent<HTMLTextAreaElement>;
+
+		// Simulate the handler logic from PromptTextarea
+		if (mockEvent.key === "Enter" && (mockEvent.metaKey || mockEvent.ctrlKey)) {
+			mockEvent.preventDefault();
+			const form = mockEvent.currentTarget.closest("form");
+			if (form) {
+				form.requestSubmit();
+			}
+		}
+
+		expect(mockEvent.preventDefault).not.toHaveBeenCalled();
+		expect(mockForm.requestSubmit).not.toHaveBeenCalled();
+	});
+
+	test("calls original onKeyDown if provided", () => {
+		const mockOnKeyDown = vi.fn();
+		const props: Partial<TextareaAutosizeProps> = {
+			onKeyDown: mockOnKeyDown,
+		};
+
+		const mockEvent = {
+			key: "Enter",
+			metaKey: true,
+			ctrlKey: false,
+			preventDefault: vi.fn(),
+			currentTarget: {
+				closest: vi.fn().mockReturnValue({ requestSubmit: vi.fn() }),
+			},
+		} as unknown as React.KeyboardEvent<HTMLTextAreaElement>;
+
+		// Simulate the handler logic from PromptTextarea with onKeyDown prop
+		if (mockEvent.key === "Enter" && (mockEvent.metaKey || mockEvent.ctrlKey)) {
+			mockEvent.preventDefault();
+			const form = mockEvent.currentTarget.closest("form");
+			if (form) {
+				form.requestSubmit();
+			}
+		}
+		if (props.onKeyDown) {
+			props.onKeyDown(mockEvent);
+		}
+
+		expect(mockOnKeyDown).toHaveBeenCalledWith(mockEvent);
+	});
+});
diff --git a/site/src/modules/tasks/TaskPrompt/TaskPrompt.tsx b/site/src/modules/tasks/TaskPrompt/TaskPrompt.tsx
@@ -468,10 +468,27 @@ const PromptTextarea: FC<PromptTextareaProps> = ({
 	isSubmitting,
 	...props
 }) => {
+	const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+		// Submit form on Cmd+Enter (Mac) or Ctrl+Enter (Windows/Linux)
+		if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+			e.preventDefault();
+			// Trigger form submission by finding the closest form and submitting it
+			const form = e.currentTarget.closest("form");
+			if (form) {
+				form.requestSubmit();
+			}
+		}
+		// Call the original onKeyDown if it exists
+		if (props.onKeyDown) {
+			props.onKeyDown(e);
+		}
+	};
+
 	return (
 		<div className="relative">
 			<TextareaAutosize
 				{...props}
+				onKeyDown={handleKeyDown}
 				required
 				id="prompt"
 				name="prompt"
