From 13141a7aa3acd243709109bb3d8c8277c80db70b Mon Sep 17 00:00:00 2001
From: Arnei <arnewilken@yahoo.de>
Date: Thu, 20 Feb 2025 13:04:08 +0100
Subject: [PATCH] Fix entering single date in date range picker

When filtering by start date and entering the date by hand,
pressing enter after writing only a single date should still result
in a filter for that day.
For example, 01/01/2025 results in a range of 01/01/2025 - 01/01/2025.
This fixes that.
---
 src/components/shared/TableFilters.tsx | 55 +++++++++++++++++++-------
 1 file changed, 40 insertions(+), 15 deletions(-)

diff --git a/src/components/shared/TableFilters.tsx b/src/components/shared/TableFilters.tsx
index 66070879f6..55d77e1066 100644
--- a/src/components/shared/TableFilters.tsx
+++ b/src/components/shared/TableFilters.tsx
@@ -158,26 +158,47 @@ const TableFilters = ({
 			end?.setMinutes(59);
 			end?.setSeconds(59);
 
-			if (start && end && moment(start).isValid() && moment(end).isValid()) {
-				let filter = filterMap.find(({ name }) => name === selectedFilter);
-				if (filter) {
-					dispatch(editFilterValue({
-						filterName: filter.name,
-						value: start.toISOString() + "/" + end.toISOString()
-					}));
-					setFilterSelector(false);
-					dispatch(removeSelectedFilter());
-					// Reload of resource after going to very first page.
-					dispatch(goToPage(0))
-					await dispatch(loadResource());
-					dispatch(loadResourceIntoTable());
-				}
-			}
+			submitDateFilter(start, end);
+
 			if (start) setStartDate(start);
 			if (end) setEndDate(end);
 		}
 	}
 
+	// Workaround for entering a date range by only entering one date
+	// (e.g. 01/01/2025 results in a range of 01/01/2025 - 01/01/2025)
+	const handleDatePickerOnKeyDown = async(keyEvent: React.KeyboardEvent<HTMLElement>) => {
+		if (keyEvent.key === "Enter") {
+			let end = endDate ?? (startDate ? new Date(startDate) : undefined);
+			end?.setHours(23);
+			end?.setMinutes(59);
+			end?.setSeconds(59);
+
+			submitDateFilter(
+				startDate,
+				end
+			)
+		}
+	}
+
+	const submitDateFilter = async(start: Date | undefined | null, end: Date | undefined | null) => {
+		if (start && end && moment(start).isValid() && moment(end).isValid()) {
+			let filter = filterMap.find(({ name }) => name === selectedFilter);
+			if (filter) {
+				dispatch(editFilterValue({
+					filterName: filter.name,
+					value: start.toISOString() + "/" + end.toISOString()
+				}));
+				setFilterSelector(false);
+				dispatch(removeSelectedFilter());
+				// Reload of resource after going to very first page.
+				dispatch(goToPage(0))
+				await dispatch(loadResource());
+				dispatch(loadResourceIntoTable());
+			}
+		}
+	}
+
 	useHotkeys(
     availableHotkeys.general.REMOVE_FILTERS.sequence,
     () => removeFilters(),
@@ -274,6 +295,7 @@ const TableFilters = ({
 										startDate={startDate}
 										endDate={endDate}
 										handleDate={handleDatepicker}
+										handleDatePickerOnKeyDown={handleDatePickerOnKeyDown}
 										handleChange={handleChange}
 										openSecondFilterMenu={openSecondFilterMenu}
 										setOpenSecondFilterMenu={setOpenSecondFilterMenu}
@@ -352,6 +374,7 @@ const TableFilters = ({
 const FilterSwitch = ({
 	filter,
 	handleChange,
+	handleDatePickerOnKeyDown,
 	startDate,
 	endDate,
 	handleDate,
@@ -361,6 +384,7 @@ const FilterSwitch = ({
 } : {
 	filter: FilterData | undefined,
 	handleChange: (name: string, value: string) => void,
+	handleDatePickerOnKeyDown: (keyEvent: React.KeyboardEvent<HTMLElement>) => void,
 	startDate: Date | undefined,
 	endDate: Date | undefined,
 	handleDate: (dates: [Date | undefined | null, Date | undefined | null]) => void,
@@ -428,6 +452,7 @@ const FilterSwitch = ({
 						autoFocus
 						selected={startDate}
 						onChange={(dates) => handleDate(dates)}
+						onKeyDown={(key) => handleDatePickerOnKeyDown(key)}
 						startDate={startDate}
 						endDate={endDate}
 						selectsRange