fix: Prevent focus shift during IME composition

Add composition state tracking to CommitMessageEditor and
ReviewCreation components to prevent keyboard shortcuts from
interfering with IME input. Track isComposing state and disable
Enter/Tab/Escape navigation while users are typing with input
methods like Asian keyboards.

Co-authored-by: Byron <[email protected]>
Co-authored-by: nshcr <[email protected]>

Author: 3 people

apps/desktop/src/components/CommitMessageEditor.svelte

@@ -68,6 +68,7 @@
 
 	let composer = $state<ReturnType<typeof MessageEditor>>();
 	let titleInput = $state<HTMLTextAreaElement>();
+	let isComposing = $state(false);
 
 	const suggestionsHandler = new CommitSuggestions(aiService, uiState);
 	const diffInputArgs = $derived<DiffInputContextArgs>(
@@ -165,14 +166,27 @@
 		onchange={(value) => {
 			onChange?.({ title: value });
 		}}
+		oninput={(e: Event) => {
+			if (e instanceof InputEvent) {
+				isComposing = e.isComposing;
+			}
+		}}
 		onkeydown={async (e: KeyboardEvent) => {
+			if (
+				['Enter', 'Escape', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].includes(e.key) &&
+				isComposing
+			) {
+				e.preventDefault();
+				isComposing = false;
+				return;
+			}
 			if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
 				e.preventDefault();
 				if (title.trim()) {
 					emitAction();
 				}
 			}
-			if (e.key === 'Enter' || (e.key === 'Tab' && !e.shiftKey)) {
+			if ((e.key === 'Enter' || (e.key === 'Tab' && !e.shiftKey)) && !isComposing) {
 				e.preventDefault();
 				composer?.focus();
 			}

apps/desktop/src/components/ReviewCreation.svelte

@@ -91,6 +91,7 @@
 
 	let titleInput = $state<HTMLTextAreaElement | undefined>(undefined);
 	let messageEditor = $state<MessageEditor>();
+	let isComposing = $state(false);
 
 	// AI things
 	const aiGenEnabled = projectAiGenEnabled(projectId);
@@ -387,7 +388,15 @@
 				prTitle.set(value);
 			}}
 			onkeydown={(e: KeyboardEvent) => {
-				if (e.key === 'Enter' || (e.key === 'Tab' && !e.shiftKey)) {
+				if (
+					['Enter', 'Escape', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].includes(e.key) &&
+					isComposing
+				) {
+					e.preventDefault();
+					isComposing = false;
+					return;
+				}
+				if ((e.key === 'Enter' || (e.key === 'Tab' && !e.shiftKey)) && !isComposing) {
 					e.preventDefault();
 					messageEditor?.focus();
 				}
@@ -398,7 +407,7 @@
 					return true;
 				}
 
-				if (e.key === 'Escape') {
+				if (e.key === 'Escape' && !isComposing) {
 					e.preventDefault();
 					onClose();
 				}
@@ -408,6 +417,9 @@
 			oninput={(e: Event) => {
 				const target = e.target as HTMLInputElement;
 				prTitle.set(target.value);
+				if (e instanceof InputEvent) {
+					isComposing = e.isComposing;
+				}
 			}}
 		/>
 		<MessageEditor