fix: clear date selection when clicking an unavailable/closed day

bits-ui blocks onValueChange for unavailable dates, leaving stale selection. Adds native click detection on [data-unavailable] elements to call onchange(undefined) so the time picker hides and the user knows nothing was picked.
2026-08-22 00:34:49 +01:00
parent 1fb84b8998
commit 8384197ef0
7 changed files with 75 additions and 2 deletions
@@ -678,6 +678,21 @@
 		}
 	});

+	// Clear selection when navigating to a month that doesn't contain the selected date.
+	// Runs AFTER all synchronous state changes settle, so clicking a date in a different
+	// month (fires both onPlaceholderChange and onValueChange) keeps the new selection,
+	// while clicking prev/next arrows without picking a date clears it.
+	$effect(() => {
+		if (
+			selectedDate &&
+			placeholder &&
+			(selectedDate.month !== placeholder.month || selectedDate.year !== placeholder.year)
+		) {
+			selectedDate = undefined;
+			selectedTime = null;
+		}
+	});
+
 	async function fetchHoursRange(startDate: CalendarDate, months: number) {
 		// Calculate end month manually (CalendarDate is immutable)
 		let endYear = startDate.year;