From 4272b496ff48f30d20d163725082d77622579dd6 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Tue, 27 Feb 2024 04:07:49 +0100
Subject: [PATCH] fix(web): prevent resetting date input when entering 0
 (#7415)

* fix(web): prevent resetting date input when entering 0

* resolve conflict

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
---
 .../lib/components/elements/date-input.svelte | 24 +++++++++++++++++++
 .../faces-page/set-birth-date-modal.svelte    |  3 ++-
 .../map-page/map-settings-modal.svelte        |  5 ++--
 .../shared-components/change-date.svelte      |  3 ++-
 .../search-bar/search-date-section.svelte     |  6 +++--
 5 files changed, 35 insertions(+), 6 deletions(-)
 create mode 100644 web/src/lib/components/elements/date-input.svelte

diff --git a/web/src/lib/components/elements/date-input.svelte b/web/src/lib/components/elements/date-input.svelte
new file mode 100644
index 0000000000..e4ec4bcab8
--- /dev/null
+++ b/web/src/lib/components/elements/date-input.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements';
+
+  interface $$Props extends HTMLInputAttributes {
+    type: 'date' | 'datetime-local';
+  }
+
+  export let value: $$Props['value'] = undefined;
+  $: updatedValue = value;
+</script>
+
+<input
+  {...$$restProps}
+  {value}
+  on:input={(e) => {
+    updatedValue = e.currentTarget.value;
+
+    // Only update when value is not empty to prevent resetting the input
+    if (updatedValue !== '') {
+      value = updatedValue;
+    }
+  }}
+  on:blur={() => (value = updatedValue)}
+/>
diff --git a/web/src/lib/components/faces-page/set-birth-date-modal.svelte b/web/src/lib/components/faces-page/set-birth-date-modal.svelte
index 415f5c0f76..717b88d031 100644
--- a/web/src/lib/components/faces-page/set-birth-date-modal.svelte
+++ b/web/src/lib/components/faces-page/set-birth-date-modal.svelte
@@ -4,6 +4,7 @@
   import FullScreenModal from '../shared-components/full-screen-modal.svelte';
   import { mdiCake } from '@mdi/js';
   import Icon from '$lib/components/elements/icon.svelte';
+  import DateInput from '../elements/date-input.svelte';
 
   export let birthDate: string;
 
@@ -37,7 +38,7 @@
 
     <form on:submit|preventDefault={() => handleSubmit()} autocomplete="off">
       <div class="m-4 flex flex-col gap-2">
-        <input
+        <DateInput
           class="immich-form-input"
           id="birthDate"
           name="birthDate"
diff --git a/web/src/lib/components/map-page/map-settings-modal.svelte b/web/src/lib/components/map-page/map-settings-modal.svelte
index 17fd558ab3..49d841116a 100644
--- a/web/src/lib/components/map-page/map-settings-modal.svelte
+++ b/web/src/lib/components/map-page/map-settings-modal.svelte
@@ -8,6 +8,7 @@
   import LinkButton from '../elements/buttons/link-button.svelte';
   import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import DateInput from '../elements/date-input.svelte';
 
   export let settings: MapSettings;
   let customDateRange = !!settings.dateAfter || !!settings.dateBefore;
@@ -38,7 +39,7 @@
         <div in:fly={{ y: 10, duration: 200 }} class="flex flex-col gap-4">
           <div class="flex items-center justify-between gap-8">
             <label class="immich-form-label shrink-0 text-sm" for="date-after">Date after</label>
-            <input
+            <DateInput
               class="immich-form-input w-40"
               type="date"
               id="date-after"
@@ -48,7 +49,7 @@
           </div>
           <div class="flex items-center justify-between gap-8">
             <label class="immich-form-label shrink-0 text-sm" for="date-before">Date before</label>
-            <input class="immich-form-input w-40" type="date" id="date-before" bind:value={settings.dateBefore} />
+            <DateInput class="immich-form-input w-40" type="date" id="date-before" bind:value={settings.dateBefore} />
           </div>
           <div class="flex justify-center text-xs">
             <LinkButton
diff --git a/web/src/lib/components/shared-components/change-date.svelte b/web/src/lib/components/shared-components/change-date.svelte
index 3972c0c665..f4c45c1e03 100644
--- a/web/src/lib/components/shared-components/change-date.svelte
+++ b/web/src/lib/components/shared-components/change-date.svelte
@@ -3,6 +3,7 @@
   import { DateTime } from 'luxon';
   import ConfirmDialogue from './confirm-dialogue.svelte';
   import Combobox from './combobox.svelte';
+  import DateInput from '../elements/date-input.svelte';
 
   export let initialDate: DateTime = DateTime.now();
 
@@ -74,7 +75,7 @@
       <div class="mt-2" />
       <div class="flex flex-col">
         <label for="datetime">Date and Time</label>
-        <input
+        <DateInput
           class="immich-form-input text-sm my-4 w-full"
           id="datetime"
           type="datetime-local"
diff --git a/web/src/lib/components/shared-components/search-bar/search-date-section.svelte b/web/src/lib/components/shared-components/search-bar/search-date-section.svelte
index 02fa903309..f08436bd00 100644
--- a/web/src/lib/components/shared-components/search-bar/search-date-section.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-date-section.svelte
@@ -6,13 +6,15 @@
 </script>
 
 <script lang="ts">
+  import DateInput from '$lib/components/elements/date-input.svelte';
+
   export let filters: SearchDateFilter;
 </script>
 
 <div id="date-range-selection" class="grid grid-cols-[repeat(auto-fit,minmax(10rem,1fr))] gap-5">
   <label class="immich-form-label" for="start-date">
     <span>START DATE</span>
-    <input
+    <DateInput
       class="immich-form-input w-full mt-1 hover:cursor-pointer"
       type="date"
       id="start-date"
@@ -24,7 +26,7 @@
 
   <label class="immich-form-label" for="end-date">
     <span>END DATE</span>
-    <input
+    <DateInput
       class="immich-form-input w-full mt-1 hover:cursor-pointer"
       type="date"
       id="end-date"