fix modal enter bug; add arrow key focus shift for buttons

Author: mProjectsCode

jsEngine/api/prompts/ButtonModalComponent.svelte

@@ -2,7 +2,7 @@
 	import type { ButtonPromptOptions } from 'jsEngine/api/PromptAPI';
 	import Button from 'jsEngine/utils/Button.svelte';
 	import type { SvelteModal } from './SvelteModal';
-	import { ButtonStyleType } from 'jsEngine/utils/Util';
+	import { ButtonStyleType, mod } from 'jsEngine/utils/Util';
 
 	const {
 		options,
@@ -11,13 +11,49 @@
 		options: ButtonPromptOptions<unknown>;
 		modal: SvelteModal<any, unknown>;
 	} = $props();
+
+	let divEl: HTMLDivElement;
+
+	function shiftFocus(next: boolean) {
+		const focusedButton = divEl.querySelector('button:focus');
+
+		if (focusedButton) {
+			const index = parseInt(focusedButton.getAttribute('data-index') ?? '0', 10);
+			const nextIndex = mod(index + (next ? 1 : -1), options.buttons.length);
+
+			const newFocusedButton = divEl.querySelector(`button[data-index="${nextIndex}"]`);
+
+			if (newFocusedButton && newFocusedButton instanceof HTMLElement) {
+				newFocusedButton.focus();
+			}
+		}
+	}
+
+	function handleKey(event: KeyboardEvent) {
+		if (event.key === 'ArrowRight') {
+			event.preventDefault();
+			shiftFocus(true);
+		}
+
+		if (event.key === 'ArrowLeft') {
+			event.preventDefault();
+			shiftFocus(true);
+		}
+	}
 </script>
 
 <p>{options.content}</p>
 
-<div class="modal-button-container">
-	{#each options.buttons as button}
-		<Button variant={button.variant ?? ButtonStyleType.DEFAULT} onclick={() => modal.submit(button.value)}>
+<div class="modal-button-container" bind:this={divEl}>
+	{#each options.buttons as button, i}
+		<Button
+			variant={button.variant ?? ButtonStyleType.DEFAULT}
+			onclick={() => modal.submit(button.value)}
+			other={{
+				'data-index': i,
+				onkeydown: (e: KeyboardEvent) => handleKey(e),
+			}}
+		>
 			{button.label}
 		</Button>
 	{/each}

jsEngine/api/prompts/InputModalComponent.svelte

@@ -24,9 +24,22 @@
 
 	function onKeydown(event: KeyboardEvent) {
 		if (event.key === 'Enter' && inputType !== 'textarea') {
+			event.stopPropagation();
+			event.preventDefault();
+
+			modal.submit(value);
+		}
+		if (event.key === 'Enter' && event.ctrlKey && inputType === 'textarea') {
+			event.stopPropagation();
+			event.preventDefault();
+
 			modal.submit(value);
 		}
+
 		if (event.key === 'Escape') {
+			event.stopPropagation();
+			event.preventDefault();
+
 			modal.submit(undefined);
 		}
 	}

jsEngine/utils/Button.svelte

@@ -8,12 +8,14 @@
 		variant = ButtonStyleType.DEFAULT,
 		disabled = false,
 		tooltip = '',
+		other = {},
 		onclick = () => {},
 		children,
 	}: {
 		variant?: ButtonStyleType;
 		disabled?: boolean;
 		tooltip?: string;
+		other?: Record<string, unknown>;
 		onclick?: (e: MouseEvent) => void | Promise<void>;
 		children: Snippet;
 	} = $props();
@@ -28,6 +30,7 @@
 	aria-label={tooltip}
 	onclick={onclick}
 	disabled={disabled}
+	{...other}
 >
 	{@render children()}
 </button>

jsEngine/utils/Util.ts

@@ -8,3 +8,7 @@ export enum ButtonStyleType {
 	DESTRUCTIVE = 'destructive',
 	PLAIN = 'plain',
 }
+
+export function mod(a: number, b: number): number {
+	return ((a % b) + b) % b;
+}

tsconfig.json

@@ -20,5 +20,5 @@
 		"lib": ["DOM", "ESNext"],
 		"allowSyntheticDefaultImports": true
 	},
-	"include": ["jsEngine/**/*.ts"]
+	"include": ["jsEngine/**/*.ts", "jsEngine/**/*.svelte"]
 }