fix enter submits in the time range dropdown

solidtime-io · Jan 29, 2025 · 84622c3 · 84622c3
1 parent 1a03637
commit 84622c3
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 19 deletions.
diff --git a/resources/js/packages/ui/src/Input/TimePickerSimple.vue b/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>

diff --git a/resources/js/packages/ui/src/Input/TimeRangeSelector.vue b/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

diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue
@@ -20,10 +20,6 @@ const emit = defineEmits<{
 
 const open = ref(false);
 const triggerElement = ref<HTMLButtonElement | null>(null);
-function closeAndFocusButton() {
-    triggerElement.value?.focus();
-    open.value = false;
-}
 </script>
 
 <template>
@@ -59,7 +55,7 @@ function closeAndFocusButton() {
                             emit('changed', newStart, newEnd)
                     "
                     focus
-                    @close="closeAndFocusButton"
+                    @close="open = false"
                     :start="start"
                     :end="end">
                 </TimeRangeSelector>

diff --git a/resources/js/packages/ui/src/TimeTracker/TimeTrackerRangeSelector.vue b/resources/js/packages/ui/src/TimeTracker/TimeTrackerRangeSelector.vue
@@ -28,8 +28,8 @@ function pauseLiveTimerUpdate(event: FocusEvent) {
 
 function onTimeEntryEnterPress() {
     updateTimerAndStartLiveTimerUpdate();
-    //const activeElement = document.activeElement as HTMLElement;
-    // activeElement?.blur();
+    const activeElement = document.activeElement as HTMLElement;
+    activeElement?.blur();
 }
 
 const currentTime = computed({
@@ -147,9 +147,10 @@ function openModalOnTab(e: FocusEvent) {
 function focusNextElement(e: KeyboardEvent) {
     if (open.value) {
         e.preventDefault();
-        const focusableElement = timeRangeSelector.value?.querySelector<HTMLElement>(
-            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-        );
+        const focusableElement =
+            timeRangeSelector.value?.querySelector<HTMLElement>(
+                'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+            );
         focusableElement?.focus();
     }
 }