fix: prevent trends date input from being disabled while typing (#1370)

Co-authored-by: Daniel Roe <daniel@roe.dev>

Author: RYGRIT

app/components/Package/TrendsChart.vue

@@ -16,6 +16,7 @@ import type {
   WeeklyDataPoint,
   YearlyDataPoint,
 } from '~/types/chart'
+import { DATE_INPUT_MAX } from '~/utils/input'
 
 const props = withDefaults(
   defineProps<{
@@ -1452,6 +1453,7 @@ watch(selectedMetric, value => {
           v-if="showFacetSelector"
           id="trends-metric-select"
           v-model="selectedMetric"
+          :disabled="activeMetricState.pending"
           :items="METRICS.map(m => ({ label: m.label, value: m.id }))"
           :label="$t('package.trends.facet')"
         />
@@ -1485,8 +1487,8 @@ watch(selectedMetric, value => {
               <InputBase
                 id="startDate"
                 v-model="startDate"
-                :disabled="activeMetricState.pending"
                 type="date"
+                :max="DATE_INPUT_MAX"
                 class="w-full min-w-0 bg-transparent ps-7"
                 size="medium"
               />
@@ -1505,8 +1507,8 @@ watch(selectedMetric, value => {
               <InputBase
                 id="endDate"
                 v-model="endDate"
-                :disabled="activeMetricState.pending"
                 type="date"
+                :max="DATE_INPUT_MAX"
                 class="w-full min-w-0 bg-transparent ps-7"
                 size="medium"
               />

app/utils/input.ts

@@ -26,3 +26,5 @@ export function isKeyWithoutModifiers(event: KeyboardEvent, key: string): boolea
     !event.shiftKey
   )
 }
+
+export const DATE_INPUT_MAX = '9999-12-31'