Skip to content

Commit 13141a7

Browse files
committed
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.
1 parent 69fa37d commit 13141a7

1 file changed

Lines changed: 40 additions & 15 deletions

File tree

src/components/shared/TableFilters.tsx

Lines changed: 40 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -158,26 +158,47 @@ const TableFilters = ({
158158
end?.setMinutes(59);
159159
end?.setSeconds(59);
160160

161-
if (start && end && moment(start).isValid() && moment(end).isValid()) {
162-
let filter = filterMap.find(({ name }) => name === selectedFilter);
163-
if (filter) {
164-
dispatch(editFilterValue({
165-
filterName: filter.name,
166-
value: start.toISOString() + "/" + end.toISOString()
167-
}));
168-
setFilterSelector(false);
169-
dispatch(removeSelectedFilter());
170-
// Reload of resource after going to very first page.
171-
dispatch(goToPage(0))
172-
await dispatch(loadResource());
173-
dispatch(loadResourceIntoTable());
174-
}
175-
}
161+
submitDateFilter(start, end);
162+
176163
if (start) setStartDate(start);
177164
if (end) setEndDate(end);
178165
}
179166
}
180167

168+
// Workaround for entering a date range by only entering one date
169+
// (e.g. 01/01/2025 results in a range of 01/01/2025 - 01/01/2025)
170+
const handleDatePickerOnKeyDown = async(keyEvent: React.KeyboardEvent<HTMLElement>) => {
171+
if (keyEvent.key === "Enter") {
172+
let end = endDate ?? (startDate ? new Date(startDate) : undefined);
173+
end?.setHours(23);
174+
end?.setMinutes(59);
175+
end?.setSeconds(59);
176+
177+
submitDateFilter(
178+
startDate,
179+
end
180+
)
181+
}
182+
}
183+
184+
const submitDateFilter = async(start: Date | undefined | null, end: Date | undefined | null) => {
185+
if (start && end && moment(start).isValid() && moment(end).isValid()) {
186+
let filter = filterMap.find(({ name }) => name === selectedFilter);
187+
if (filter) {
188+
dispatch(editFilterValue({
189+
filterName: filter.name,
190+
value: start.toISOString() + "/" + end.toISOString()
191+
}));
192+
setFilterSelector(false);
193+
dispatch(removeSelectedFilter());
194+
// Reload of resource after going to very first page.
195+
dispatch(goToPage(0))
196+
await dispatch(loadResource());
197+
dispatch(loadResourceIntoTable());
198+
}
199+
}
200+
}
201+
181202
useHotkeys(
182203
availableHotkeys.general.REMOVE_FILTERS.sequence,
183204
() => removeFilters(),
@@ -274,6 +295,7 @@ const TableFilters = ({
274295
startDate={startDate}
275296
endDate={endDate}
276297
handleDate={handleDatepicker}
298+
handleDatePickerOnKeyDown={handleDatePickerOnKeyDown}
277299
handleChange={handleChange}
278300
openSecondFilterMenu={openSecondFilterMenu}
279301
setOpenSecondFilterMenu={setOpenSecondFilterMenu}
@@ -352,6 +374,7 @@ const TableFilters = ({
352374
const FilterSwitch = ({
353375
filter,
354376
handleChange,
377+
handleDatePickerOnKeyDown,
355378
startDate,
356379
endDate,
357380
handleDate,
@@ -361,6 +384,7 @@ const FilterSwitch = ({
361384
} : {
362385
filter: FilterData | undefined,
363386
handleChange: (name: string, value: string) => void,
387+
handleDatePickerOnKeyDown: (keyEvent: React.KeyboardEvent<HTMLElement>) => void,
364388
startDate: Date | undefined,
365389
endDate: Date | undefined,
366390
handleDate: (dates: [Date | undefined | null, Date | undefined | null]) => void,
@@ -428,6 +452,7 @@ const FilterSwitch = ({
428452
autoFocus
429453
selected={startDate}
430454
onChange={(dates) => handleDate(dates)}
455+
onKeyDown={(key) => handleDatePickerOnKeyDown(key)}
431456
startDate={startDate}
432457
endDate={endDate}
433458
selectsRange

0 commit comments

Comments
 (0)