From 4eaa45d28cdc6dc5b5de42e339b615f0ee1e899a Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Thu, 13 Jun 2024 19:59:55 +0200
Subject: [PATCH] improve time picker ux

---
 .../ui/time-picker/TimeComponentInput.svelte  | 12 +++++++
 .../ui/time-picker/TimePicker.svelte          | 33 ++++++++++++++++++-
 2 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/website/src/lib/components/ui/time-picker/TimeComponentInput.svelte b/website/src/lib/components/ui/time-picker/TimeComponentInput.svelte
index 6258bb54..7a65aaed 100644
--- a/website/src/lib/components/ui/time-picker/TimeComponentInput.svelte
+++ b/website/src/lib/components/ui/time-picker/TimeComponentInput.svelte
@@ -11,6 +11,14 @@
 		bind:value
 		on:input
 		on:change
+		on:keypress
+		on:focusin={() => {
+			let input = document.activeElement;
+			if (input instanceof HTMLInputElement) {
+				input.select();
+			}
+		}}
+		on:focusin
 		class="w-[22px] {$$props.class ?? ''}"
 		{...$$restProps}
 	/>
@@ -21,7 +29,11 @@
 		@apply px-0.5;
 		@apply text-right;
 		@apply border-none;
+		@apply focus:ring-0;
+		@apply focus:ring-offset-0;
+		@apply focus:outline-none;
 		@apply focus-visible:ring-0;
 		@apply focus-visible:ring-offset-0;
+		@apply focus-visible:outline-none;
 	}
 </style>
diff --git a/website/src/lib/components/ui/time-picker/TimePicker.svelte b/website/src/lib/components/ui/time-picker/TimePicker.svelte
index 0a4ebf20..fdb9dc82 100644
--- a/website/src/lib/components/ui/time-picker/TimePicker.svelte
+++ b/website/src/lib/components/ui/time-picker/TimePicker.svelte
@@ -42,15 +42,32 @@
 		}
 		seconds = (rounded % 60).toString().padStart(2, '0');
 	}
+
+	let container: HTMLDivElement;
+	let countKeyPress = 0;
+	function onKeyPress(e) {
+		if (['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].includes(e.key)) {
+			countKeyPress++;
+			if (countKeyPress === 2) {
+				if (e.target.id === 'hours') {
+					container.querySelector('#minutes')?.focus();
+				} else if (e.target.id === 'minutes') {
+					container.querySelector('#seconds')?.focus();
+				}
+			}
+		}
+	}
 </script>
 
 <div
-	class="flex flex-row items-center w-fit border rounded-md px-3 {disabled
+	bind:this={container}
+	class="flex flex-row items-center w-fit border rounded-md px-3 focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 {disabled
 		? 'opacity-50 cursor-not-allowed'
 		: ''}"
 >
 	{#if showHours}
 		<TimeComponentInput
+			id="hours"
 			bind:value={hours}
 			{disabled}
 			class="w-[30px]"
@@ -65,11 +82,16 @@
 					hours = 0;
 				}
 			}}
+			on:keypress={onKeyPress}
+			on:focusin={() => {
+				countKeyPress = 0;
+			}}
 			on:change
 		/>
 		<span class="text-sm">:</span>
 	{/if}
 	<TimeComponentInput
+		id="minutes"
 		bind:value={minutes}
 		{disabled}
 		on:input={() => {
@@ -86,10 +108,15 @@
 			}
 			minutes = minutes.toString().padStart(showHours ? 2 : 1, '0');
 		}}
+		on:keypress={onKeyPress}
+		on:focusin={() => {
+			countKeyPress = 0;
+		}}
 		on:change
 	/>
 	<span class="text-sm">:</span>
 	<TimeComponentInput
+		id="seconds"
 		bind:value={seconds}
 		{disabled}
 		on:input={() => {
@@ -106,6 +133,10 @@
 			}
 			seconds = seconds.toString().padStart(2, '0');
 		}}
+		on:keypress={onKeyPress}
+		on:focusin={() => {
+			countKeyPress = 0;
+		}}
 		on:change
 	/>
 </div>