fix enter submits in the time range dropdown

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

@@ -90,7 +90,6 @@ useFocus(timeInput, { initialValue: props.focus });
 const inputValue = ref(
     model.value ? getLocalizedDayJs(model.value).format('HH:mm') : null
 );
-const open = ref(false);
 </script>
 
 <template>
@@ -102,16 +101,10 @@ const open = ref(false);
             twMerge('text-center w-24 px-3 py-2', size === 'large' && 'w-28')
         "
         @blur="updateTime"
-        @keydown.enter="
-            updateTime($event);
-            open = false;
-        "
-        @keydown.tab="open = false"
         @focus="($event.target as HTMLInputElement).select()"
         @mouseup="($event.target as HTMLInputElement).select()"
         @click="($event.target as HTMLInputElement).select()"
         @pointerup="($event.target as HTMLInputElement).select()"
-        @focusin="open = true"
         data-testid="time_picker_input"
         type="text" />
 </template>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { defineProps, ref, watch } from 'vue';
+import { defineProps, nextTick, ref, watch } from 'vue';
 import { useFocusWithin } from '@vueuse/core';
 import DatePicker from '@/packages/ui/src/Input/DatePicker.vue';
 import {
@@ -55,7 +55,9 @@ watch(focused, (newValue, oldValue) => {
     <div
         ref="dropdownContent"
         class="grid grid-cols-2 divide-x divide-card-background-separator text-center py-2">
-        <div class="px-2">
+        <div
+            class="px-2"
+            @keydown.enter.prevent="nextTick(() => emit('close'))">
             <div class="font-bold text-white text-sm pb-2">Start</div>
             <div class="space-y-2">
                 <TimePickerSimple