[Due for payment 2025-08-29] [$125] Reports - `Hamburger` button is lighter than the exposed filter buttons below and `Cancel` button is showing when you are viewing results.

[izarutskaya]

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

Action Performed:

1. Go to https://staging.new.expensify.com/ or open the App
2. Navigate to Reports
3. Click on Filters > Has keywords > Add keywords > Click Save > View results

Expected Result:

Bug 1: On step 2 the hamburger button is using standard button styles.
Bug 2: On step 3 the Cancel button isn't showing when you are viewing results.

Actual Result:

Bug 1: On step 2 the hamburger button isn't using standard button styles, notice how it is lighter than the exposed filter buttons below.
Bug 2: On step 3 the Cancel button should only be showing when the router is focused, not when you are viewing results.

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
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

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

Screenshots/Videos

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021947977517668794785
• Upwork Job ID: 1947977517668794785
• Last Price Increase: 2025-08-13
• Automatic offers:
• FitseTLT | Contributor | 108404016

Issue Owner

Current Issue Owner: @dylanexpensify

[melvin-bot]

Triggered auto assignment to @dylanexpensify (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.

[izarutskaya]

From @dukenv0307

Proposal

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

The cancel button is indeed correct though when the router is focused

What is the root cause of that problem?

For the hamburger button isn't using standard button styles because we are using theme.sidebarHover style

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

Lines 25 to 26 in 090e39b

	<Button
	innerStyles={[{backgroundColor: theme.sidebarHover}]}

For the Cancel button is always shown when we have the input value

App/src/components/Search/SearchAutocompleteInput.tsx

Lines 244 to 254 in 090e39b

	{!!value && (
	<Animated.View
	style={styles.pr3}
	layout={SearchFiltersButtonTransition}
	>
	<TextInputClearButton
	onPressButton={clearFilters}
	style={styles.mt0}
	/>
	</Animated.View>
	)}

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

1. We should replace theme.sidebarHover style with theme.buttonDefaultBG or simply delete that style to use the default here

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

Lines 25 to 26 in 090e39b

	<Button
	innerStyles={[{backgroundColor: theme.sidebarHover}]}

2. We should create a new state like shouldShowClearButton and set it as true in onFocus and as false in onBlur

App/src/components/Search/SearchAutocompleteInput.tsx

Lines 226 to 235 in fc6d222

	onFocus={() => {
	onFocus?.();
	autocompleteListRef?.current?.updateExternalTextInputFocus(true);
	focusedSharedValue.set(true);
	}}
	onBlur={() => {
	autocompleteListRef?.current?.updateExternalTextInputFocus(false);
	focusedSharedValue.set(false);
	onBlur?.();
	}}

then use it here

App/src/components/Search/SearchAutocompleteInput.tsx

Line 244 in fc6d222

{!!value && (

    {!!value && shouldShowClearButton && (
    ...
    )}

Or we can use the focusedSharedValue.get() value

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)

[FitseTLT]

Proposal

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

Reports - Hamburger button is lighter than the exposed filter buttons below and Cancel button is showing when you are viewing results.

What is the root cause of that problem?

1. We are using a non-standard background style here
   

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

   Lines 25 to 26 in 090e39b

   	<Button
   	innerStyles={[{backgroundColor: theme.sidebarHover}]}

2. We display the cancel button when the router is open or when the search result is not isCannedSearchQuery
   

   App/src/pages/Search/SearchPageNarrow.tsx

   Line 108 in 3d16eba

   const shouldDisplayCancelSearch = shouldUseNarrowLayout && ((!!queryJSON && !isCannedSearchQuery(queryJSON)) || searchRouterListVisible);

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

1. We should remove the style to fallback to the default background
   

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

   Lines 25 to 26 in 090e39b

   	<Button
   	innerStyles={[{backgroundColor: theme.sidebarHover}]}

   
   we can update the icon color and other style tweaks consulting with the design team.
2. We update the condition to only be visible if the router is visible

App/src/pages/Search/SearchPageNarrow.tsx

Line 108 in 3d16eba

const shouldDisplayCancelSearch = shouldUseNarrowLayout && ((!!queryJSON && !isCannedSearchQuery(queryJSON)) || searchRouterListVisible);

    const shouldDisplayCancelSearch = shouldUseNarrowLayout && searchRouterListVisible;

then we need to remove the navigation code here for cancelSearchCallback

App/src/pages/Search/SearchPageNarrow.tsx

Line 114 in 3d16eba

Navigation.goBack(ROUTES.SEARCH_ROOT.getRoute({query: buildCannedSearchQuery()}));

as we no more display it to reset the filter
Another alternative I propose is we display the clear button when there is a filter applied that can be cleared to give the user in narrow layout an easier method to reset filters because we cannot easily access the tabs as in large screens. In that case if we want to keep it, I propose to change the copy to say more clear text like clear filters (or sth) when the clear button is visible without the rourter open.
We can control the copy displayed in here

App/src/components/Navigation/TopBar.tsx

Lines 55 to 61 in 3d16eba

	accessibilityLabel={translate('common.cancel')}
	style={styles.textBlue}
	onPress={() => {
	cancelSearch();
	}}
	>
	<Text style={[styles.textBlue]}>{translate('common.cancel')}</Text>

via a prop here

App/src/pages/Search/SearchPageNarrow.tsx

Line 162 in 3d16eba

cancelSearch={shouldDisplayCancelSearch ? cancelSearchCallback : undefined}

we will display the new copy if !searchRouterListVisible

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

N / A

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rojiphil (External)

[melvin-bot]

Upwork job price has been updated to $125