make sure empty duration input updates v-model to null, fixes #816

resources/js/packages/ui/src/EstimatedTimeSection.vue

@@ -11,9 +11,10 @@ const emit = defineEmits(['submit']);
     <div class="pt-6">
         <div class="flex items-center space-x-1 mb-2">
             <ClockIcon class="text-text-quaternary w-4"></ClockIcon>
-            <InputLabel for="billable" value="Time Estimated" />
+            <InputLabel for="time-estimated" value="Time Estimated" />
         </div>
         <DurationInput
+            id="time-estimated"
             v-model="model"
             class="max-w-[150px]"
             @submit="emit('submit')"></DurationInput>

resources/js/packages/ui/src/Input/DurationInput.vue

@@ -2,6 +2,10 @@
 import { computed, ref } from 'vue';
 import { TextInput } from '@/packages/ui/src';
 
+defineProps<{
+    id?: string;
+}>();
+
 const model = defineModel<number | null>({
     default: null,
 });
@@ -16,6 +20,8 @@ function updateDuration() {
     const hours = parseInt(temporaryCustomTimerEntry.value);
     if (!isNaN(hours)) {
         model.value = hours * 60 * 60;
+    } else {
+        model.value = null;
     }
     temporaryCustomTimerEntry.value = '';
 }
@@ -54,6 +60,7 @@ function updateAndSubmit() {
 <template>
     <div class="relative">
         <TextInput
+            :id="id"
             v-model="currentTime"
             class="w-full overflow-hidden pr-14"
             placeholder="0"

resources/js/packages/ui/src/Input/TextInput.vue

@@ -5,6 +5,7 @@ import { twMerge } from 'tailwind-merge';
 const props = defineProps<{
     name?: string;
     class?: string;
+    id?: string;
 }>();
 
 const input = ref<HTMLInputElement | null>(null);
@@ -21,6 +22,7 @@ const model = defineModel();
 
 <template>
     <input
+        :id="id"
         ref="input"
         v-model="model"
         :class="