fix focus state for dropdowns, fix taborder for timerange select in timetracker and timeentryrows

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

@@ -4,7 +4,6 @@ import {
     flip,
     limitShift,
     type Placement,
-    type ReferenceElement,
     shift,
     useFloating,
 } from '@floating-ui/vue';
@@ -45,6 +44,11 @@ watch(open, (value) => {
         layers.value.push(id);
     } else {
         layers.value = layers.value.filter((layer) => layer !== id);
+        reference.value
+            ?.querySelector<HTMLElement>(
+                'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+            )
+            ?.focus();
     }
 });
 
@@ -69,7 +73,7 @@ function onBackgroundClick() {
     open.value = false;
 }
 
-const reference = ref<null | ReferenceElement>(null);
+const reference = ref<null | HTMLElement>(null);
 const floating = ref(null);
 const { floatingStyles } = useFloating(reference, floating, {
     placement: props.align,

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

@@ -61,6 +61,7 @@ watch(focused, (newValue, oldValue) => {
                 <TimePickerSimple
                     data-testid="time_entry_range_start"
                     tabindex="0"
+                    @keydown.exact.tab.shift.stop.prevent="emit('close')"
                     :focus
                     @changed="updateTimeEntry"
                     v-model="tempStart"></TimePickerSimple>
@@ -84,6 +85,7 @@ watch(focused, (newValue, oldValue) => {
                     v-model="tempEnd"></DatePicker>
             </div>
             <div class="text-muted" v-else>-- : --</div>
+            <div tabindex="0" @focusin="emit('close')"></div>
         </div>
     </div>
 </template>