Fix view not always updating with browseWithoutSelecting

Closes #82

Author: probablykasper

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## Next
+- Fix view not updating when value changes externally with `browseWithoutSelecting`
+
 ## 2.10.0 - 2023 Nov 15
 - Add `required` prop (@ChromuSx)
 - Add `id` prop (@portfolioris)

src/lib/DatePicker.svelte

@@ -59,8 +59,11 @@
 
 	/** The date shown in the popup when none is selected */
 	let browseDate = value ? cloneDate(value) : cloneDate(clamp(defaultDate, min, max))
-	$: if (browseDate.getTime() !== value?.getTime() && !browseWithoutSelecting) {
-		browseDate = value ? cloneDate(value) : browseDate
+	$: setBrowseDate(value)
+	function setBrowseDate(value: Date | null) {
+		if (browseDate.getTime() !== value?.getTime()) {
+			browseDate = value ? cloneDate(value) : browseDate
+		}
 	}
 
 	let years = getYears(min, max)

src/routes/bug/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import DatePicker from '$lib/DatePicker.svelte'
 
-	let date: Date | null = null
+	let date: Date | null = new Date()
 	// let date_string: string | undefined
 	let is_date_valid: boolean
 	let max_date = new Date()
@@ -16,6 +16,13 @@
 	}
 </script>
 
+<button
+	type="button"
+	on:click={() => {
+		date?.setMonth(date.getMonth() - 1)
+		date = date
+	}}>Subtract 1 month</button
+>
 <!-- <input bind:value={date_string} type="date" class="hidden" id="id_birth_date" name="birth_date" /> -->
 <!-- <DateInput
 	bind:value={date}
@@ -24,4 +31,4 @@
 	format="yyyy-MM-dd"
 	placeholder="Select a date"
 /> -->
-<DatePicker bind:value={date} max={max_date} />
+<DatePicker bind:value={date} max={max_date} browseWithoutSelecting={true} />