add "press enter to close" for time inputs (#11705)

* add "enter to close" for time inputs

* add menu closing to datetime in system filters

app/src/components/v-date-picker/v-date-picker.vue

@@ -35,7 +35,7 @@ export default defineComponent({
 			default: true,
 		},
 	},
-	emits: ['update:modelValue'],
+	emits: ['update:modelValue', 'close'],
 	setup(props, { emit }) {
 		const { t } = useI18n();
 
@@ -63,10 +63,7 @@ export default defineComponent({
 
 		onBeforeUnmount(() => {
 			if (flatpickr) {
-				const selectedDate = flatpickr.selectedDates.length > 0 ? flatpickr.selectedDates[0] : null;
-				emitValue(selectedDate);
-
-				flatpickr.destroy();
+				flatpickr.close();
 				flatpickr = null;
 			}
 		});
@@ -84,6 +81,10 @@ export default defineComponent({
 				const selectedDate = selectedDates.length > 0 ? selectedDates[0] : null;
 				emitValue(selectedDate);
 			},
+			onClose(selectedDates: Date[], _dateStr: string, _instance: Flatpickr.Instance) {
+				const selectedDate = selectedDates.length > 0 ? selectedDates[0] : null;
+				emitValue(selectedDate);
+			},
 			onReady(_selectedDates: Date[], _dateStr: string, instance: Flatpickr.Instance) {
 				const setToNowButton: HTMLElement = document.createElement('button');
 				setToNowButton.innerHTML = t('interfaces.datetime.set_to_now');
@@ -91,6 +92,14 @@ export default defineComponent({
 				setToNowButton.tabIndex = -1;
 				setToNowButton.addEventListener('click', setToNow);
 				instance.calendarContainer.appendChild(setToNowButton);
+
+				if (!props.use24) {
+					instance.amPM?.addEventListener('keydown', enterToClose);
+				} else if (props.includeSeconds) {
+					instance.secondElement?.addEventListener('keydown', enterToClose);
+				} else {
+					instance.minuteElement?.addEventListener('keydown', enterToClose);
+				}
 			},
 		};
 
@@ -122,6 +131,12 @@ export default defineComponent({
 			flatpickr?.setDate(new Date(), true);
 		}
 
+		function enterToClose(e: any) {
+			if (e.key !== 'Enter') return;
+			flatpickr?.close();
+			emit('close');
+		}
+
 		return { t, wrapper };
 	},
 });

app/src/interfaces/_system/system-filter/input-component.vue

@@ -36,12 +36,24 @@
 			placeholder="--"
 			@input="emitValue($event.target.value)"
 		/>
-		<v-menu :close-on-content-click="false" :show-arrow="true" placement="bottom-start" seamless full-height>
+		<v-menu
+			ref="dateTimeMenu"
+			:close-on-content-click="false"
+			:show-arrow="true"
+			placement="bottom-start"
+			seamless
+			full-height
+		>
 			<template #activator="{ toggle }">
 				<v-icon class="preview" name="event" small @click="toggle" />
 			</template>
 			<div class="date-input">
-				<v-date-picker :type="type" :model-value="value" @update:model-value="emitValue" />
+				<v-date-picker
+					:type="type"
+					:model-value="value"
+					@update:model-value="emitValue"
+					@close="dateTimeMenu?.deactivate"
+				/>
 			</div>
 		</v-menu>
 	</template>
@@ -100,6 +112,8 @@ export default defineComponent({
 		const inputEl = ref<HTMLElement>();
 		const { t } = useI18n();
 
+		const dateTimeMenu = ref();
+
 		const displayValue = computed(() => {
 			if (props.value === null) return null;
 			if (props.value === undefined) return null;
@@ -134,7 +148,7 @@ export default defineComponent({
 			if (props.focus) inputEl.value?.focus();
 		});
 
-		return { displayValue, width, t, emitValue, inputEl, inputPattern };
+		return { displayValue, width, t, emitValue, inputEl, inputPattern, dateTimeMenu };
 
 		function emitValue(val: unknown) {
 			if (val === '') {

app/src/interfaces/datetime/datetime.vue

@@ -1,5 +1,5 @@
 <template>
-	<v-menu :close-on-content-click="false" attached :disabled="disabled" full-height seamless>
+	<v-menu ref="dateTimeMenu" :close-on-content-click="false" attached :disabled="disabled" full-height seamless>
 		<template #activator="{ toggle, active }">
 			<v-input :active="active" clickable readonly :model-value="displayValue" :disabled="disabled" @click="toggle">
 				<template v-if="!disabled" #append>
@@ -15,6 +15,7 @@
 			:use-24="use24"
 			:model-value="value"
 			@update:model-value="$emit('input', $event)"
+			@close="dateTimeMenu?.deactivate"
 		/>
 	</v-menu>
 </template>
@@ -53,6 +54,8 @@ export default defineComponent({
 	setup(props, { emit }) {
 		const { t } = useI18n();
 
+		const dateTimeMenu = ref();
+
 		const { displayValue } = useDisplayValue();
 
 		function useDisplayValue() {
@@ -93,7 +96,7 @@ export default defineComponent({
 			emit('input', null);
 		}
 
-		return { displayValue, unsetValue };
+		return { displayValue, unsetValue, dateTimeMenu };
 	},
 });
 </script>