[Due for payment 2026-08-05] [Tracking] [CFI] Expose selected search filters in Reports

[MitchExpensify]

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.3.10-6
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: NA
Email or phone of affected tester (no customers): mitch@expensify.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: mitch@expensify.com
Slack conversation (hyperlinked to channel name): https://expensify.slack.com/archives/C07NMDKEFMH/p1768411102767869

Action Performed:

1. Open Reports
2. Apply any number of filters

Expected Result:

Selected filters should be exposed

Actual Result:

Selected filters are hidden

Workaround:

Open "Filters (#)" to remind yourself what filters are applied

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Screenshots/Videos

See above

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

Triggered auto assignment to @dubielzyk-expensify (Design), see these Stack Overflow questions for more details.

[melvin-bot]

Triggered auto assignment to @heyjennahay (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO. Remember to draft any necessary HelpDot updates by following the instructions here.

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @shawnborton (NewFeature)

[MitchExpensify]

One suggestion in Slack is to "Show up to 5 exposed filters, followed by an exposed filter that is something like “+X” (which potentially just lets the user opt into seeing all those exposed filters" cc @JmillsExpensify

[daledah]

Proposal

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

Selected filters are hidden

What is the root cause of that problem?

In src/components/Search/SearchPageHeader/SearchFiltersBar.tsx, the filters array only includes a limited subset of all available filters as dropdown chips. Many filters that can be set via the Advanced Filters page (such as to, keyword, expenseType, merchant, currency, category, tag, description, reportID, etc.) are not included in this array.

When users apply these filters, they are calculated as hiddenSelectedFilters and only shown as a count in the "Filters (X)" button, rather than being exposed as visible dropdown chips.

App/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx

Lines 574 to 710 in 8ed5bc1

	const filters = useMemo<FilterItem[]>(() => {
	const fromValue = searchAdvancedFiltersForm.from?.map((currentAccountID) => getDisplayNameOrDefault(personalDetails?.[currentAccountID], currentAccountID, false)) ?? [];
	const shouldDisplayGroupByFilter = !!groupBy?.value;
	const shouldDisplayGroupCurrencyFilter = shouldDisplayGroupByFilter && hasMultipleOutputCurrency;
	const shouldDisplayFeedFilter = feedOptions.length > 1 && !!searchAdvancedFiltersForm.feed;
	const shouldDisplayPostedFilter =
	!!searchAdvancedFiltersForm.feed && (!!searchAdvancedFiltersForm.postedOn || !!searchAdvancedFiltersForm.postedAfter || !!searchAdvancedFiltersForm.postedBefore);
	const shouldDisplayWithdrawalTypeFilter = !!searchAdvancedFiltersForm.withdrawalType;
	const shouldDisplayWithdrawnFilter = !!searchAdvancedFiltersForm.withdrawnOn || !!searchAdvancedFiltersForm.withdrawnAfter || !!searchAdvancedFiltersForm.withdrawnBefore;
	const filterList = [
	{
	label: translate('common.type'),
	PopoverComponent: typeComponent,
	value: type?.text ?? null,
	filterKey: FILTER_KEYS.TYPE,
	},
	...(shouldDisplayGroupByFilter
	? [
	{
	label: translate('search.groupBy'),
	PopoverComponent: groupByComponent,
	value: groupBy?.text ?? null,
	filterKey: FILTER_KEYS.GROUP_BY,
	},
	]
	: []),
	...(shouldDisplayGroupCurrencyFilter
	? [
	{
	label: translate('common.groupCurrency'),
	PopoverComponent: groupCurrencyComponent,
	value: groupCurrency?.value ?? null,
	filterKey: FILTER_KEYS.GROUP_CURRENCY,
	},
	]
	: []),
	...(shouldDisplayFeedFilter
	? [
	{
	label: translate('search.filters.feed'),
	PopoverComponent: feedComponent,
	value: feed.map((option) => option.text),
	filterKey: FILTER_KEYS.FEED,
	},
	]
	: []),
	...(shouldDisplayPostedFilter
	? [
	{
	label: translate('search.filters.posted'),
	PopoverComponent: postedPickerComponent,
	value: displayPosted,
	filterKey: FILTER_KEYS.POSTED_ON,
	},
	]
	: []),
	...(shouldDisplayWithdrawalTypeFilter
	? [
	{
	label: translate('search.withdrawalType'),
	PopoverComponent: withdrawalTypeComponent,
	value: withdrawalType?.text ?? null,
	filterKey: FILTER_KEYS.WITHDRAWAL_TYPE,
	},
	]
	: []),
	...(shouldDisplayWithdrawnFilter
	? [
	{
	label: translate('search.filters.withdrawn'),
	PopoverComponent: withdrawnPickerComponent,
	value: displayWithdrawn,
	filterKey: FILTER_KEYS.WITHDRAWN_ON,
	},
	]
	: []),
	{
	label: translate('common.status'),
	PopoverComponent: statusComponent,
	value: status.map((option) => option.text),
	filterKey: FILTER_KEYS.STATUS,
	},
	...(type?.value === CONST.SEARCH.DATA_TYPES.CHAT
	? [
	{
	label: translate('search.has'),
	PopoverComponent: hasComponent,
	value: has.map((option) => option.text),
	filterKey: FILTER_KEYS.HAS,
	},
	]
	: []),
	...(type?.value === CONST.SEARCH.DATA_TYPES.CHAT
	? [
	{
	label: translate('search.filters.is'),
	PopoverComponent: isComponent,
	value: is.map((option) => option.text),
	filterKey: FILTER_KEYS.IS,
	},
	]
	: []),
	{
	label: translate('common.date'),
	PopoverComponent: datePickerComponent,
	value: displayDate,
	filterKey: FILTER_KEYS.DATE_ON,
	},
	{
	label: translate('common.from'),
	PopoverComponent: userPickerComponent,
	value: fromValue,
	filterKey: FILTER_KEYS.FROM,
	},
	...(shouldDisplayWorkspaceFilter
	? [
	{
	label: translate('workspace.common.workspace'),
	PopoverComponent: workspaceComponent,
	value: workspaceValue,
	filterKey: FILTER_KEYS.POLICY_ID,
	},
	]
	: []),
	...(shouldDisplayGroupByFilter
	? [
	{
	label: translate('search.view.label'),
	PopoverComponent: viewComponent,
	value: viewValue?.text ?? null,
	filterKey: FILTER_KEYS.VIEW,
	},
	]
	: []),
	].filter((filterItem) => isFilterSupported(filterItem.filterKey, type?.value ?? CONST.SEARCH.DATA_TYPES.EXPENSE));

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

We should show up to 5 exposed filters with values, followed by a "+X" chip that lets users see all remaining filters. This provides a clean UX while still exposing selected filters.

In SearchFiltersBar.tsx:

1. Add missing filters to the filters array (to, keyword, merchant, category, tag, description, reportID, expenseType, currency)
2. Create PopoverComponents for new filters (redirect to Advanced Filters page when clicked)
3. Add MAX_VISIBLE_FILTERS = 5 constant to limit displayed filters
4. Add visibleFilters and remainingFiltersCount to split the filters
5. Show "+X" button in renderListFooter when there are remaining filters
6. Update FlatList to use visibleFilters instead of filters

diff --git a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
--- a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
+++ b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx
@@ -540,6 +540,95 @@ function SearchFiltersBar({
         [searchAdvancedFiltersForm.from, updateFilterForm],
     );
 
+    const toUserPickerComponent = useCallback(
+        ({closeOverlay}: PopoverComponentProps) => {
+            const value = searchAdvancedFiltersForm.to ?? [];
+            return (
+                <UserSelectPopup
+                    value={value}
+                    closeOverlay={closeOverlay}
+                    onChange={(selectedUsers) => updateFilterForm({to: selectedUsers})}
+                />
+            );
+        },
+        [searchAdvancedFiltersForm.to, updateFilterForm],
+    );
+
+    // Simple text display components for filters that don't need inline editing
+    // These open the advanced filters page when clicked
+    const keywordComponent = useCallback(
+        ({closeOverlay}: PopoverComponentProps) => {
+            closeOverlay();
+            openAdvancedFilters();
+            return null;
+        },
+        [openAdvancedFilters],
+    );
+
+    // Similar components for: merchantComponent, categoryComponent, tagComponent,
+    // descriptionComponent, reportIDComponent, expenseTypeComponent, currencyComponent
+
     const {typeFiltersKeys} = useAdvancedSearchFilters();
 
+    // Maximum number of filter chips to display before showing "+X"
+    const MAX_VISIBLE_FILTERS = 5;
+
     const filters = useMemo<FilterItem[]>(() => {
         const fromValue = searchAdvancedFiltersForm.from?.map(...) ?? [];
+        const toValue = searchAdvancedFiltersForm.to?.map(...) ?? [];
+        const shouldDisplayToFilter = toValue.length > 0;
+        const shouldDisplayKeywordFilter = !!searchAdvancedFiltersForm.keyword;
+        const shouldDisplayMerchantFilter = !!searchAdvancedFiltersForm.merchant;
+        const shouldDisplayCategoryFilter = searchAdvancedFiltersForm.category?.length > 0;
+        const shouldDisplayTagFilter = searchAdvancedFiltersForm.tag?.length > 0;
+        const shouldDisplayDescriptionFilter = !!searchAdvancedFiltersForm.description;
+        const shouldDisplayReportIDFilter = !!searchAdvancedFiltersForm.reportID;
+        const shouldDisplayExpenseTypeFilter = searchAdvancedFiltersForm.expenseType?.length > 0;
+        const shouldDisplayCurrencyFilter = searchAdvancedFiltersForm.currency?.length > 0;
 
         const filterList = [
             // ... existing filters ...
+            ...(shouldDisplayToFilter
+                ? [{label: translate('common.to'), PopoverComponent: toUserPickerComponent, value: toValue, filterKey: FILTER_KEYS.TO}]
+                : []),
+            ...(shouldDisplayKeywordFilter
+                ? [{label: translate('search.filters.keyword'), PopoverComponent: keywordComponent, value: searchAdvancedFiltersForm.keyword, filterKey: FILTER_KEYS.KEYWORD}]
+                : []),
+            // ... similar entries for merchant, category, tag, description, reportID, expenseType, currency
         ];
         return filterList;
     }, [...]);
 
+    // Split filters: show first MAX_VISIBLE_FILTERS, count the rest
+    const visibleFilters = useMemo(() => filters.slice(0, MAX_VISIBLE_FILTERS), [filters]);
+    const remainingFiltersCount = useMemo(() => Math.max(0, filters.length - MAX_VISIBLE_FILTERS), [filters.length]);
+
     const renderListFooter = useCallback(
         () => (
             <View style={[styles.flexRow, styles.gap2]}>
+                {remainingFiltersCount > 0 && (
+                    <Button
+                        link
+                        small
+                        shouldUseDefaultHover={false}
+                        text={`+${remainingFiltersCount}`}
+                        iconFill={theme.link}
+                        iconHoverFill={theme.linkHover}
+                        textStyles={[styles.textMicroBold]}
+                        onPress={openAdvancedFilters}
+                    />
+                )}
                 <Button ... text={filterButtonText} ... />
             </View>
         ),
-        [...],
+        [..., remainingFiltersCount],
     );
 
     // In render, use visibleFilters instead of filters
     <FlatList
-        data={filters}
+        data={visibleFilters}
         ...
     />

Note: The above is just an idea for implementation; we can discuss the more details in the PR phase.

What alternative solutions did you explore? (Optional)

An alternative approach would be to show all filters as chips without the 5-filter limit. However, this could result in a cluttered UI when many filters are selected. The "+X" approach provides a cleaner UX while still making it clear that additional filters are applied.