From ec9ee7a98f5e00525eb8290327a107fd9075f871 Mon Sep 17 00:00:00 2001 From: stinger567 Date: Fri, 14 Mar 2025 13:56:12 -0400 Subject: [PATCH] Set it so time is not updated till after the time element is out of focus, this allows for keyboard inputs that may temporally set the time bellow or above the min/max values --- src/lib/TimePicker.svelte | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/lib/TimePicker.svelte b/src/lib/TimePicker.svelte index 74c1000..7c8131b 100644 --- a/src/lib/TimePicker.svelte +++ b/src/lib/TimePicker.svelte @@ -103,7 +103,6 @@ browseDate.setMilliseconds(value) } - browseDate = setTime(browseDate) setText(browseDate) } @@ -134,6 +133,19 @@ function focus(e: FocusEvent & SpanEvent) { select(e.currentTarget) } + + function focusout(e: FocusEvent) { + const node = e.currentTarget as HTMLElement + // Use setTimeout with 0ms delay to check focus after the browser has processed the current event cycle + // This is necessary because when switching focus between elements, the document.activeElement updates + // after the focusout event fires + setTimeout(() => { + if (!node.contains(document.activeElement)) { + browseDate = setTime(browseDate) + setText(browseDate) + } + }, 0) + } {#if timePrecision} @@ -146,6 +158,7 @@ e.preventDefault() // prevent text dragging } }} + on:focusout={focusout} >