[Due for payment 2025-11-07] [$250] Report - Saved filter is not shown checked after refresh.

[jponikarchuk]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: V9.2.3-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: #70012
Email or phone of affected tester (no customers): Slottwo1 bxvb@gmail.com
Issue reported by: Applause Internal Team
Device used: Redminote 10s android 13
App Component: User Settings

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Go to reports - advanced filter - paid
3. Select this month radio button and save search
4. Open paid
5. Refresh the page
6. Note this month radio button selected is not shown
7. Reopen the page and note now radio button selected is shown

Expected Result:

Saved filter must be shown checked after refresh.

Actual Result:

Saved filter is not shown checked after refresh.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021968225820993416364
• Upwork Job ID: 1968225820993416364
• Last Price Increase: 2025-09-24

Issue Owner

Current Issue Owner: @getusha

[melvin-bot]

Triggered auto assignment to @sonialiap (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[daledah]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Saved filter is not shown checked after refresh.

What is the root cause of that problem?

The component uses an “uncontrolled” internal state dateValues, initialized from defaultDateValues only once at mount.

After a reload, defaultDateValues may change after the component has rendered, but dateValues does not automatically update, so SingleSelectListItem’s isSelected (which depends on dateValues) gets out of sync with the new data.

App/src/components/Search/SearchDatePresetFilterBase.tsx

Line 67 in a24b0c0

const [dateValues, setDateValues] = useState<SearchDateValues>(defaultDateValues);

What changes do you think we should make in order to solve the problem?

We should set the dateValues when the defaultDateValues changes

    useEffect(() => {
        setDateValues(defaultDateValues);
    }, [defaultDateValues]);

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

We can separate user interactions from default behavior, and compute the final date value dynamically like the pattern what we already used in Search component.

IMO the dateValue is very simple to compute so this approach is a bit overkill.

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[dmkt9]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Saved filter is not shown checked after refresh.

What is the root cause of that problem?

1. The dateValues state is initialized with defaultDateValues via useState:
   

   App/src/components/Search/SearchDatePresetFilterBase.tsx

   Line 67 in 32cf88b

   const [dateValues, setDateValues] = useState<SearchDateValues>(defaultDateValues);

2. However, since searchAdvancedFiltersForm is undefined during the initial render, defaultDateValues does not contain the expected values:
   

   App/src/components/Search/SearchDatePresetFilterBasePage.tsx

   Lines 35 to 42 in 32cf88b

   	const [searchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {canBeMissing: true});
   	const [selectedDateModifier, setSelectedDateModifier] = useState<SearchDateModifier | null>(null);
   	const defaultDateValues = {
   	[CONST.SEARCH.DATE_MODIFIERS.ON]: searchAdvancedFiltersForm?.[`${dateKey}${CONST.SEARCH.DATE_MODIFIERS.ON}`],
   	[CONST.SEARCH.DATE_MODIFIERS.BEFORE]: searchAdvancedFiltersForm?.[`${dateKey}${CONST.SEARCH.DATE_MODIFIERS.BEFORE}`],
   	[CONST.SEARCH.DATE_MODIFIERS.AFTER]: searchAdvancedFiltersForm?.[`${dateKey}${CONST.SEARCH.DATE_MODIFIERS.AFTER}`],
   	};

What changes do you think we should make in order to solve the problem?

We should avoid initializing the state this way. Instead, use defaultDateValues as a fallback value. This ensures defaultDateValues serves its intended role as a default and eliminates the need for multiple renders to reset dateValues.

App/src/components/Search/SearchDatePresetFilterBase.tsx

Lines 67 to 69 in 32cf88b

	const [dateValues, setDateValues] = useState<SearchDateValues>(defaultDateValues);
	const setDateValue = useCallback((dateModifier: SearchDateModifier, value: string | undefined) => {
	setDateValues((prevDateValues) => {

const [dateValues = defaultDateValues, setDateValues] = useState<SearchDateValues>();
const setDateValue = useCallback(
    (dateModifier: SearchDateModifier, value: string | undefined) => {
        setDateValues((prevDateValues = defaultDateValues) => {

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

NA

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

2025-09-09.18-36-39.mp4

[bernhardoj]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Selected date filter is not checked/selected after refresh.

What is the root cause of that problem?

The value is initialized from defaultDateValues.

App/src/components/Search/SearchDatePresetFilterBase.tsx

Line 67 in 89efec0

const [dateValues, setDateValues] = useState<SearchDateValues>(defaultDateValues);

The defaultDateValues is derived from SEARCH_ADVANCED_FILTERS_FORM onyx data.

App/src/components/Search/SearchDatePresetFilterBasePage.tsx

Lines 35 to 42 in 89efec0

	const [searchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {canBeMissing: true});
	const [selectedDateModifier, setSelectedDateModifier] = useState<SearchDateModifier | null>(null);
	const defaultDateValues = {
	[CONST.SEARCH.DATE_MODIFIERS.ON]: searchAdvancedFiltersForm?.[`${dateKey}${CONST.SEARCH.DATE_MODIFIERS.ON}`],
	[CONST.SEARCH.DATE_MODIFIERS.BEFORE]: searchAdvancedFiltersForm?.[`${dateKey}${CONST.SEARCH.DATE_MODIFIERS.BEFORE}`],
	[CONST.SEARCH.DATE_MODIFIERS.AFTER]: searchAdvancedFiltersForm?.[`${dateKey}${CONST.SEARCH.DATE_MODIFIERS.AFTER}`],
	};

However, after refresh, the data is still loading, so it's undefined, and the selected item is not checked.

What changes do you think we should make in order to solve the problem?

We have 2 options.

First of all, we need to get the loading state of the onyx data.

const [searchAdvancedFiltersForm, searchAdvancedFiltersFormMetadata] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {canBeMissing: true});
const isSearchAdvancedFiltersFormLoading = isLoadingOnyxValue(searchAdvancedFiltersFormMetadata);

For the 1st option, we can use this loading state as the component key, so it remounts when the key changes.

App/src/components/Search/SearchDatePresetFilterBasePage.tsx

Lines 113 to 119 in 89efec0

	<SearchDatePresetFilterBase
	ref={searchDatePresetFilterBaseRef}
	defaultDateValues={defaultDateValues}
	selectedDateModifier={selectedDateModifier}
	onSelectDateModifier={setSelectedDateModifier}
	presets={presets}
	/>

key={isSearchAdvancedFiltersFormLoading}

For the 2nd option, we can update the value state once the loading completes.

First, pass the loading state to SearchDatePresetFilterBase.

isSearchAdvancedFiltersFormLoading={isSearchAdvancedFiltersFormLoading}

Then, in SearchDatePresetFilterBase, update the state when the loading completes.

useEffect(() => {
    if (isSearchAdvancedFiltersFormLoading) {
        return;
    }
    setDateValues(defaultDateValues)
}, [isSearchAdvancedFiltersFormLoading]);

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

[melvin-bot]

@sonialiap Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

@sonialiap 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021968225820993416364