Merge pull request #11283 from gitbutlerapp/dont-autofocus

Don't autofocus

Author: Caleb-T-Owens

apps/desktop/src/components/BranchList.svelte

@@ -15,6 +15,7 @@
 	import { BASE_BRANCH_SERVICE } from '$lib/baseBranch/baseBranchService.svelte';
 	import { MoveBranchDzHandler } from '$lib/branches/dropHandler';
 	import { CLAUDE_CODE_SERVICE } from '$lib/codegen/claude';
+	import { focusClaudeInput } from '$lib/codegen/focusClaudeInput';
 	import { currentStatus } from '$lib/codegen/messages';
 	import { projectDisableCodegen } from '$lib/config/config';
 	import { REORDER_DROPZONE_FACTORY } from '$lib/dragging/stackingReorderDropzoneManager';
@@ -331,15 +332,7 @@
 									if (!stackId) return;
 									laneState?.selection.set({ branchName, codegen: true, previewOpen: true });
 									setTimeout(() => {
-										// This is a hacky way, but we need the job done until we
-										// can figure out a good way of autofocusing text inputs,
-										// without too many of them firing at the wrong times.
-										const element = document.querySelector(
-											`[data-id="${stackId}"] .ContentEditable__root`
-										);
-										if (element instanceof HTMLElement) {
-											element?.focus();
-										}
+										focusClaudeInput(stackId);
 									}, 100);
 								}}
 							/>

apps/desktop/src/components/codegen/CodegenInput.svelte

@@ -258,6 +258,7 @@
 				initialText={value}
 				{onChange}
 				onKeyDown={handleEditorKeyDown}
+				autoFocus={false}
 			>
 				{#snippet plugins()}
 					<FilePlugin

apps/desktop/src/lib/codegen/focusClaudeInput.ts

@@ -0,0 +1,9 @@
+export function focusClaudeInput(stackId: string) {
+	// This is a hacky way, but we need the job done until we
+	// can figure out a good way of autofocusing text inputs,
+	// without too many of them firing at the wrong times.
+	const element = document.querySelector(`[data-id="${stackId}"] .ContentEditable__root`);
+	if (element instanceof HTMLElement) {
+		element?.focus();
+	}
+}

apps/desktop/src/lib/stacks/createAiStack.svelte.ts

@@ -1,3 +1,4 @@
+import { focusClaudeInput } from '$lib/codegen/focusClaudeInput';
 import { STACK_SERVICE } from '$lib/stacks/stackService.svelte';
 import { UI_STATE } from '$lib/state/uiState.svelte';
 import { sleep } from '$lib/utils/sleep';
@@ -26,6 +27,10 @@ export function useCreateAiStack(projectId: Reactive<string>) {
 
 		const lane = uiState.lane(stack.id);
 		lane.selection.set({ codegen: true, branchName: stack.heads[0]?.name, previewOpen: true });
+
+		// I strongly dislike this sleep
+		await sleep(50);
+		focusClaudeInput(stack.id);
 	}
 
 	return { createAiStack };