Skip to content

feat: Date Range filter follow up with fixes (#81501) #87055

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
btkcodedev wants to merge 3 commits into
base: main
Choose a base branch
from
+35 −10
Open

feat: Date Range filter follow up with fixes (#81501) #87055

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a1db0b7
fix: Custom Range date selection
btkcodedev Apr 3, 2026
9c0c1b8
fix: one sided range preserved
btkcodedev Apr 3, 2026
eb675d9
fix: reset on both filter page and date selection page
btkcodedev Apr 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 16 additions & 7 deletions src/components/Search/FilterComponents/DateFilterBase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
import React, {useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState} from 'react';
import {View} from 'react-native';
import Button from '@components/Button';
import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
Expand Down Expand Up @@ -71,6 +71,7 @@ function DateFilterBase({

const normalizedDefaultDateValues = useMemo(() => ({...getEmptyDateValues(), ...defaultDateValues}), [defaultDateValues]);
const searchDatePresetFilterBaseRef = useRef<SearchDatePresetFilterBaseHandle>(null);
const scrollViewRef = useRef<React.ComponentRef<typeof ScrollView>>(null);
const [selectedDateModifierState, setSelectedDateModifierState] = useState<SearchDateModifier | null>(null);
const [shouldShowRangeError, setShouldShowRangeError] = useState(false);
const [rangeDisplayText, setRangeDisplayText] = useState(() =>
Expand Down Expand Up @@ -149,6 +150,13 @@ function DateFilterBase({

const computedTitle = getDateModifierTitle(selectedDateModifier, title ?? '', translate);

useLayoutEffect(() => {
if (!shouldShowRangeError || selectedDateModifier !== CONST.SEARCH.DATE_MODIFIERS.RANGE) {
return;
}
scrollViewRef.current?.scrollToEnd({animated: true});
}, [selectedDateModifier, shouldShowRangeError]);

const reset = useCallback(() => {
if (!searchDatePresetFilterBaseRef.current) {
return;
Expand Down Expand Up @@ -200,6 +208,7 @@ function DateFilterBase({
/>
)}
<ScrollView
ref={scrollViewRef}
keyboardShouldPersistTaps="handled"
contentContainerStyle={[styles.flexGrow1]}
>
Expand All @@ -215,13 +224,13 @@ function DateFilterBase({
onRangeValidationErrorChange={setShouldShowRangeError}
forceVerticalCalendars
/>
{shouldShowRangeSummary && (
<Text style={[styles.textLabelSupporting, styles.mh5, styles.mt2]}>
{`${translate('common.range')}: `}
<Text style={[styles.textLabel]}>{rangeDisplayText}</Text>
</Text>
)}
</ScrollView>
{shouldShowRangeSummary && (
<Text style={[styles.textLabelSupporting, styles.mh5, styles.mt2]}>
{`${translate('common.range')}: `}
<Text style={[styles.textLabel]}>{rangeDisplayText}</Text>
</Text>
)}
{shouldShowActionButtons && (
<>
<Button
Expand Down
22 changes: 18 additions & 4 deletions src/components/Search/FilterComponents/DatePresetFilterBase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,10 +149,14 @@ function DatePresetFilterBase({
const getRangeEphemeralValuesFromDateValues = useCallback((dateValues: SearchDateValues) => {
const rangeBoundaries = getRangeBoundariesFromFormValue(dateValues[CONST.SEARCH.DATE_MODIFIERS.RANGE]);

return {
from: rangeBoundaries.from,
to: rangeBoundaries.to,
};
if (rangeBoundaries.from && rangeBoundaries.to) {
return {
from: rangeBoundaries.from,
to: rangeBoundaries.to,
};
}

return {};
}, []);

const notifyDateValuesChange = useCallback(
Expand Down Expand Up @@ -261,6 +265,9 @@ function DatePresetFilterBase({
}
// eslint-disable-next-line react-hooks/set-state-in-effect
setDateValue(CONST.SEARCH.DATE_MODIFIERS.RANGE, getRangeQueryValue(rangeEphemeralValues.from, rangeEphemeralValues.to) || undefined);
if (rangeEphemeralValues.from && rangeEphemeralValues.to) {
onRangeValidationErrorChange?.(false);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [rangeEphemeralValues.from, rangeEphemeralValues.to]);

Expand Down Expand Up @@ -349,6 +356,7 @@ function DatePresetFilterBase({

if (selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
setRangeEphemeralValues({});
rangeEntrySnapshotRef.current = undefined;
} else {
setEphemeralDateValue(undefined);
}
Expand Down Expand Up @@ -444,9 +452,15 @@ function DatePresetFilterBase({
fromValue={rangeEphemeralValues.from}
toValue={rangeEphemeralValues.to}
onFromSelected={(date) => {
if (date && rangeEphemeralValues.to) {
onRangeValidationErrorChange?.(false);
}
setRangeEphemeralValues((prev) => ({...prev, from: date}));
}}
onToSelected={(date) => {
if (rangeEphemeralValues.from && date) {
onRangeValidationErrorChange?.(false);
}
setRangeEphemeralValues((prev) => ({...prev, to: date}));
}}
shouldShowError={shouldShowRangeError}
Expand Down
3 changes: 1 addition & 2 deletions src/components/Search/FilterComponents/RangeDatePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ function RangeDatePicker({fromValue, toValue, onFromSelected, onToSelected, shou
// eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
const {isSmallScreenWidth} = useResponsiveLayout();
const shouldStack = forceVertical || isSmallScreenWidth;
const fromMaxDate = parseCalendarDate(toValue) ?? CONST.CALENDAR_PICKER.MAX_DATE;
const fromMaxDate = parseCalendarDate(toValue);
const toMinDate = parseCalendarDate(fromValue) ?? CONST.CALENDAR_PICKER.MIN_DATE;

return (
Expand All @@ -70,7 +70,6 @@ function RangeDatePicker({fromValue, toValue, onFromSelected, onToSelected, shou
value={toValue}
onSelected={onToSelected}
minDate={toMinDate}
maxDate={CONST.CALENDAR_PICKER.MAX_DATE}
headerContainerStyle={styles.ph4}
/>
</View>
Expand Down
Loading