improve focus handling in time tracker component, improve focus-visible state for timetracker start and stop button

This commit is contained in:
Gregor Vostrak
2024-09-29 00:03:56 +02:00
parent 878bbd359d
commit c9c221de62
2 changed files with 12 additions and 5 deletions

View File

@@ -1,6 +1,6 @@
<script setup lang="ts">
import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
import { computed, ref } from 'vue';
import { computed, ref, watch } from 'vue';
import TimeRangeSelector from '@/packages/ui/src/Input/TimeRangeSelector.vue';
import dayjs, { Dayjs } from 'dayjs';
import parse from 'parse-duration';
@@ -131,6 +131,12 @@ const startTime = computed(() => {
}
return dayjs().utc().format();
});
const inputField = ref<HTMLInputElement | null>(null);
watch(open, (isOpen) => {
if (!isOpen) {
inputField.value?.focus();
}
});
</script>
<template>
@@ -144,6 +150,7 @@ const startTime = computed(() => {
<input
placeholder="00:00:00"
@focus="pauseLiveTimerUpdate"
ref="inputField"
data-testid="time_entry_time"
@blur="updateTimerAndStartLiveTimerUpdate"
@keydown.enter="onTimeEntryEnterPress"