add focus trap to tag dropdown to fix focus management

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

@@ -8,6 +8,7 @@ import { twMerge } from 'tailwind-merge';
 
 const props = defineProps<{
     class?: string;
+    tabindex?: string;
 }>();
 
 // This has to be a localized timestamp, not UTC
@@ -50,6 +51,7 @@ const emit = defineEmits(['changed']);
         <input
             id="start"
             ref="datePicker"
+            :tabindex="tabindex"
             :class="
                 twMerge(
                     'bg-input-background border text-white border-input-border focus-visible:outline-0 focus-visible:border-input-border-active focus-visible:ring-0 rounded-md',

resources/js/packages/ui/src/Tag/TagDropdown.vue

@@ -6,6 +6,7 @@ import TagCreateModal from '@/packages/ui/src/Tag/TagCreateModal.vue';
 import MultiselectDropdownItem from '@/packages/ui/src/Input/MultiselectDropdownItem.vue';
 import type { Tag } from '@/packages/api/src';
 import type { Placement } from '@floating-ui/vue';
+import {UseFocusTrap} from "@vueuse/integrations/useFocusTrap/component";
 
 const props = withDefaults(
     defineProps<{
@@ -177,6 +178,9 @@ const showCreateTagModal = ref(false);
             <slot name="trigger"></slot>
         </template>
         <template #content>
+            <UseFocusTrap
+                v-if="open"
+                :options="{ immediate: true, allowOutsideClick: true }">
                 <input
                     ref="searchInput"
                     :value="searchValue"
@@ -217,6 +221,7 @@ const showCreateTagModal = ref(false);
                         <span>Create new Tag</span>
                     </button>
                 </div>
+            </UseFocusTrap>
         </template>
     </Dropdown>
 </template>

resources/js/packages/ui/src/TimeEntry/TimeEntryCreateModal.vue

@@ -18,7 +18,6 @@ import type {
     Client,
     CreateTimeEntryBody,
 } from '@/packages/api/src';
-import TimePicker from '@/packages/ui/src/Input/TimePicker.vue';
 import { getOrganizationCurrencyString } from '@/utils/money';
 import { canCreateProjects } from '@/utils/permissions';
 import TagDropdown from '@/packages/ui/src/Tag/TagDropdown.vue';
@@ -30,6 +29,7 @@ import DurationHumanInput from '@/packages/ui/src/Input/DurationHumanInput.vue';
 
 import { InformationCircleIcon } from '@heroicons/vue/20/solid';
 import type { Tag, Task } from '@/packages/api/src';
+import TimePickerSimple from "@/packages/ui/src/Input/TimePickerSimple.vue";
 
 const show = defineModel('show', { default: false });
 const saving = ref(false);
@@ -244,30 +244,34 @@ type BillableOption = {
                 <div class="">
                     <InputLabel>Start</InputLabel>
                     <div class="flex flex-col items-center space-y-2 mt-1">
-                        <TimePicker
+                        <TimePickerSimple
+
                             v-model="localStart"
-                            size="large"></TimePicker>
+                            size="large"></TimePickerSimple>
                         <DatePicker
                             v-model="localStart"
+                            tabindex="1"
                             class="text-xs text-text-tertiary max-w-28 px-1.5 py-1.5"></DatePicker>
                     </div>
                 </div>
                 <div class="">
                     <InputLabel>End</InputLabel>
                     <div class="flex flex-col items-center space-y-2 mt-1">
-                        <TimePicker
+                        <TimePickerSimple
                             v-model="localEnd"
-                            size="large"></TimePicker>
+                            size="large"></TimePickerSimple>
                         <DatePicker
                             v-model="localEnd"
+                            tabindex="1"
                             class="text-xs text-text-tertiary max-w-28 px-1.5 py-1.5"></DatePicker>
                     </div>
                 </div>
             </div>
         </template>
         <template #footer>
-            <SecondaryButton @click="show = false"> Cancel</SecondaryButton>
+            <SecondaryButton tabindex="2" @click="show = false"> Cancel</SecondaryButton>
             <PrimaryButton
+                tabindex="2"
                 class="ms-3"
                 :class="{ 'opacity-25': saving }"
                 :disabled="saving"