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 all commits
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
32 changes: 24 additions & 8 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 @@ -34,6 +34,8 @@ type DateFilterBaseProps = {
onBackButtonPress?: () => void;
/** Callback when the filter is submitted with the selected date values */
onSubmit: (values: SearchDateValues) => void;
/** Callback when the filter is reset, used to persist cleared values without triggering navigation */
onReset?: (values: SearchDateValues) => void;
/** Callback when a date value changes (e.g. preset click or calendar save) */
onDateValuesChange?: (values: SearchDateValues) => void;
/** Controlled selected date modifier */
Expand All @@ -58,6 +60,7 @@ function DateFilterBase({
isSearchAdvancedFiltersFormLoading,
onBackButtonPress,
onSubmit,
onReset,
onDateValuesChange,
onDateModifierChange,
shouldShowButtonsOnlyWithDateModifier = false,
Expand All @@ -71,6 +74,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,22 +153,33 @@ 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;
}

if (selectedDateModifier) {
searchDatePresetFilterBaseRef.current.clearDateValueOfSelectedDateModifier();
const dateValues = searchDatePresetFilterBaseRef.current.getDateValues();
setSelectedDateModifier(null);
setShouldShowRangeError(false);
onDateModifierChange?.(false);
onReset?.(dateValues);
return;
}

searchDatePresetFilterBaseRef.current.clearDateValues();
const dateValues = searchDatePresetFilterBaseRef.current.getDateValues();
setShouldShowRangeError(false);
}, [onDateModifierChange, selectedDateModifier, setSelectedDateModifier]);
onReset?.(dateValues);
}, [onDateModifierChange, onReset, selectedDateModifier, setSelectedDateModifier]);

const save = useCallback(() => {
if (!searchDatePresetFilterBaseRef.current) {
Expand Down Expand Up @@ -200,6 +215,7 @@ function DateFilterBase({
/>
)}
<ScrollView
ref={scrollViewRef}
keyboardShouldPersistTaps="handled"
contentContainerStyle={[styles.flexGrow1]}
>
Expand All @@ -215,13 +231,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
10 changes: 10 additions & 0 deletions src/components/Search/FilterComponents/DatePresetFilterBase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -261,6 +261,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 +352,7 @@ function DatePresetFilterBase({

if (selectedDateModifier === CONST.SEARCH.DATE_MODIFIERS.RANGE) {
setRangeEphemeralValues({});
rangeEntrySnapshotRef.current = undefined;
} else {
setEphemeralDateValue(undefined);
}
Expand Down Expand Up @@ -444,9 +448,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