From eefa7c8ca8772a857814a10cb27f52e8fa455e39 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Mon, 24 Jun 2024 14:31:24 +0200
Subject: [PATCH] fix focus & click behaviour of time range selector and task
 project dropdown modal

---
 .../Common/TimeEntry/TimeEntryRangeSelector.vue          | 1 +
 resources/js/Components/Common/TimeRangeSelector.vue     | 3 ++-
 .../TimeTracker/TimeTrackerProjectTaskDropdown.vue       | 3 ++-
 .../Common/TimeTracker/TimeTrackerRangeSelector.vue      | 9 ++++++++-
 resources/js/Components/TimeTracker.vue                  | 5 ++++-
 5 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/resources/js/Components/Common/TimeEntry/TimeEntryRangeSelector.vue b/resources/js/Components/Common/TimeEntry/TimeEntryRangeSelector.vue
index 75977a56..0b9c8567 100644
--- a/resources/js/Components/Common/TimeEntry/TimeEntryRangeSelector.vue
+++ b/resources/js/Components/Common/TimeEntry/TimeEntryRangeSelector.vue
@@ -33,6 +33,7 @@ const open = ref(false);
                     @changed="
                         (newStart, newEnd) => emit('changed', newStart, newEnd)
                     "
+                    focus
                     :start="start"
                     :end="end">
                 </TimeRangeSelector>
diff --git a/resources/js/Components/Common/TimeRangeSelector.vue b/resources/js/Components/Common/TimeRangeSelector.vue
index 56762456..aa3cc468 100644
--- a/resources/js/Components/Common/TimeRangeSelector.vue
+++ b/resources/js/Components/Common/TimeRangeSelector.vue
@@ -9,6 +9,7 @@ import dayjs from 'dayjs';
 const props = defineProps<{
     start: string;
     end: string | null;
+    focus?: boolean;
 }>();
 
 // The timestamps for the changed event are UTC
@@ -56,7 +57,7 @@ watch(focused, (newValue, oldValue) => {
             <div class="space-y-1">
                 <TimePicker
                     data-testid="time_entry_range_start"
-                    focus
+                    :focus
                     @changed="updateTimeEntry"
                     v-model="tempStart"></TimePicker>
                 <DatePicker
diff --git a/resources/js/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue b/resources/js/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue
index 70bcfccf..67cbd44a 100644
--- a/resources/js/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue
+++ b/resources/js/Components/Common/TimeTracker/TimeTrackerProjectTaskDropdown.vue
@@ -314,7 +314,7 @@ const showCreateProject = ref(false);
             <span>Add new project</span>
         </Badge>
     </div>
-    <Dropdown v-else v-model="open" :closeOnContentClick="true" align="bottom">
+    <Dropdown v-else v-model="open" :closeOnContentClick="false" align="bottom">
         <template #trigger>
             <ProjectBadge
                 ref="projectDropdownTrigger"
@@ -340,6 +340,7 @@ const showCreateProject = ref(false);
                 :value="searchValue"
                 @input="updateSearchValue"
                 @keydown.enter="addClientIfNoneExists"
+                @click.prevent="searchInput?.focus()"
                 data-testid="client_dropdown_search"
                 @keydown.up.prevent="moveHighlightUp"
                 @keydown.down.prevent="moveHighlightDown"
diff --git a/resources/js/Components/Common/TimeTracker/TimeTrackerRangeSelector.vue b/resources/js/Components/Common/TimeTracker/TimeTrackerRangeSelector.vue
index b985fa40..225780ea 100644
--- a/resources/js/Components/Common/TimeTracker/TimeTrackerRangeSelector.vue
+++ b/resources/js/Components/Common/TimeTracker/TimeTrackerRangeSelector.vue
@@ -119,6 +119,13 @@ async function updateTimeRange(newStart: string) {
         }
     }
 }
+
+const startTime = computed(() => {
+    if (currentTimeEntry.value.start && currentTimeEntry.value.start !== '') {
+        return currentTimeEntry.value.start;
+    }
+    return dayjs().utc().format();
+});
 </script>
 
 <template>
@@ -142,7 +149,7 @@ async function updateTimeRange(newStart: string) {
             <template #content>
                 <TimeRangeSelector
                     @changed="updateTimeRange"
-                    :start="currentTimeEntry.start"
+                    :start="startTime"
                     :end="null">
                 </TimeRangeSelector>
             </template>
diff --git a/resources/js/Components/TimeTracker.vue b/resources/js/Components/TimeTracker.vue
index ff3e82ff..d3c84b7d 100644
--- a/resources/js/Components/TimeTracker.vue
+++ b/resources/js/Components/TimeTracker.vue
@@ -152,7 +152,10 @@ function switchToTimeEntryOrganization() {
                             "></BillableToggleButton>
                     </div>
                     <div class="border-l border-card-border">
-                        <TimeTrackerRangeSelector></TimeTrackerRangeSelector>
+                        <TimeTrackerRangeSelector
+                            @keydown.enter="
+                                startTimerIfNotActive
+                            "></TimeTrackerRangeSelector>
                     </div>
                 </div>
             </div>