adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-17 12:42:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix enter submits in the time range dropdown

Browse Source
This commit is contained in:
Gregor Vostrak
2025-01-29 13:55:07 +01:00
parent 1a03637e31
commit 84622c3fcc
4 changed files with 11 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
resources/js/packages/ui/src/Input/TimePickerSimple.vue
View File

@@ -90,7 +90,6 @@ useFocus(timeInput, { initialValue: props.focus });
const inputValue = ref( const inputValue = ref(
model.value ? getLocalizedDayJs(model.value).format('HH:mm') : null model.value ? getLocalizedDayJs(model.value).format('HH:mm') : null
); );
const open = ref(false);
</script> </script>
<template> <template>
@@ -102,16 +101,10 @@ const open = ref(false);
twMerge('text-center w-24 px-3 py-2', size === 'large' && 'w-28') twMerge('text-center w-24 px-3 py-2', size === 'large' && 'w-28')
" "
@blur="updateTime" @blur="updateTime"
@keydown.enter="
updateTime($event);
open = false;
"
@keydown.tab="open = false"
@focus="($event.target as HTMLInputElement).select()" @focus="($event.target as HTMLInputElement).select()"
@mouseup="($event.target as HTMLInputElement).select()" @mouseup="($event.target as HTMLInputElement).select()"
@click="($event.target as HTMLInputElement).select()" @click="($event.target as HTMLInputElement).select()"
@pointerup="($event.target as HTMLInputElement).select()" @pointerup="($event.target as HTMLInputElement).select()"
@focusin="open = true"
data-testid="time_picker_input" data-testid="time_picker_input"
type="text" /> type="text" />
</template> </template>

6
resources/js/packages/ui/src/Input/TimeRangeSelector.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { defineProps, ref, watch } from 'vue'; import { defineProps, nextTick, ref, watch } from 'vue';
import { useFocusWithin } from '@vueuse/core'; import { useFocusWithin } from '@vueuse/core';
import DatePicker from '@/packages/ui/src/Input/DatePicker.vue'; import DatePicker from '@/packages/ui/src/Input/DatePicker.vue';
import { import {
@@ -55,7 +55,9 @@ watch(focused, (newValue, oldValue) => {
<div <div
ref="dropdownContent" ref="dropdownContent"
class="grid grid-cols-2 divide-x divide-card-background-separator text-center py-2"> 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="font-bold text-white text-sm pb-2">Start</div>
<div class="space-y-2"> <div class="space-y-2">
<TimePickerSimple <TimePickerSimple

6
resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue
View File

@@ -20,10 +20,6 @@ const emit = defineEmits<{
const open = ref(false); const open = ref(false);
const triggerElement = ref<HTMLButtonElement | null>(null); const triggerElement = ref<HTMLButtonElement | null>(null);
function closeAndFocusButton() {
triggerElement.value?.focus();
open.value = false;
}
</script> </script>
<template> <template>
@@ -59,7 +55,7 @@ function closeAndFocusButton() {
emit('changed', newStart, newEnd) emit('changed', newStart, newEnd)
" "
focus focus
@close="closeAndFocusButton" @close="open = false"
:start="start" :start="start"
:end="end"> :end="end">
</TimeRangeSelector> </TimeRangeSelector>

11
resources/js/packages/ui/src/TimeTracker/TimeTrackerRangeSelector.vue
View File

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