Spend - Between option is shown in advanced filters, but missing in quick filter

[applause-bot]

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.3.82-0
Reproducible in staging?: Yes
Reproducible in production?: N/A - new feature, doesn't exist in prod
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #90029
Email or phone of affected tester (no customers): sdjsodnjiodsjsoinj1@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.5 / Chrome
App Component: Search

Action Performed:

1. Go to staging.new.expensify.com
2. Go to Spend > Expenses.
3. Click Filters.
4. Hover over Amount.
5. Click Between.
6. Enter values.
7. Click Confirm.
8. Close the filters.
9. Click on the applied quick filter.

Expected Result:

Between option will be shown in Amount quick filter.

Actual Result:

Between option is shown in advanced filters, but missing in quick filter.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

To be added by Applause Leads

View all open jobs on GitHub

Applause Internal Information
Exported by: Mita Rachim
Bug ID: 7163067

[applause-bot]

While Applause doesn't embed attachments for this bug, here are the links for quick view:
https://platform.applause.com/services/links/v1/external/7fa04d1c0321f9144eceb755b2a2714bbaec1c43b9aabe8b776bfb896d3fb2bd

[melvin-bot]

You have been assigned to this deploy blocker because you recently merged this PR: #90029

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[MelvinBot]

Proposal

What is the root cause of that problem?

The quick filter popup (AmountPopup.tsx:63-69) hardcodes only three amount modifiers — EqualTo, GreaterThan, and LessThan — in both its title map and modifierConfig array. The Between modifier is never included, so it cannot appear in the quick filter.

The advanced filters (AmountFilterComponent.tsx:169-178) include all four modifiers, which is why Between works there.

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

In AmountPopup.tsx:

1. Add the Between entry to both the title map and the modifierConfig array.
2. Add a "between" input UI (two amount fields for greaterThan/lessThan) similar to what AmountBetweenInput does in AmountFilterComponent.tsx, so users can enter a range when Between is selected.
3. Handle the save logic so that selecting Between sets both greaterThan and lessThan values and clears equalTo.

Investigation details

• PR Update advanced filters button to open filters popover #90029 introduced the new filter dropdowns including AmountPopup for quick filters and AmountFilterComponent for advanced filters.
• AmountFilterComponent has a dedicated AmountBetweenInput component that renders two side-by-side amount inputs — this pattern needs to be replicated (or extracted and shared) in the quick filter popup.
• No other open issues found for this specific problem.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[godzillaxbox19982014-lgtm]

Additional verified detail from the App code:

• The amount quick chip is routed to AmountPopup here, so the missing row is in the quick-filter popover, not the advanced-filter screen:
  

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

  Lines 56 to 69 in dd15fd9

  	if (isAmountFilterKey(filterKey)) {
  	const value = {
  	[CONST.SEARCH.AMOUNT_MODIFIERS.EQUAL_TO]: searchAdvancedFiltersForm[`${filterKey}${CONST.SEARCH.AMOUNT_MODIFIERS.EQUAL_TO}`],
  	[CONST.SEARCH.AMOUNT_MODIFIERS.GREATER_THAN]: searchAdvancedFiltersForm[`${filterKey}${CONST.SEARCH.AMOUNT_MODIFIERS.GREATER_THAN}`],
  	[CONST.SEARCH.AMOUNT_MODIFIERS.LESS_THAN]: searchAdvancedFiltersForm[`${filterKey}${CONST.SEARCH.AMOUNT_MODIFIERS.LESS_THAN}`],
  	};
  	return (
  	<AmountPopup
  	filterKey={filterKey}
  	value={value}
  	closeOverlay={closeOverlay}
  	label={label}
  	updateFilterForm={updateFilterForm}
  	/>

• AmountPopup only renders Equal to / Greater than / Less than:
  

  App/src/components/Search/FilterDropdowns/AmountPopup.tsx

  Lines 58 to 70 in dd15fd9

  	function AmountPopup({filterKey, label, value, closeOverlay, updateFilterForm}: AmountPopupProps) {
  	const {translate} = useLocalize();
  	const [selectedModifier, setSelectedModifier] = useState<ValueOf<typeof CONST.SEARCH.AMOUNT_MODIFIERS> | null>(null);
  	const [amountValues, setAmountValues] = useState(value);
  	const title = {
  	[CONST.SEARCH.AMOUNT_MODIFIERS.EQUAL_TO]: translate('search.filters.amount.equalTo'),
  	[CONST.SEARCH.AMOUNT_MODIFIERS.GREATER_THAN]: translate('search.filters.amount.greaterThan'),
  	[CONST.SEARCH.AMOUNT_MODIFIERS.LESS_THAN]: translate('search.filters.amount.lessThan'),
  	};
  	const modifierConfig = [CONST.SEARCH.AMOUNT_MODIFIERS.EQUAL_TO, CONST.SEARCH.AMOUNT_MODIFIERS.GREATER_THAN, CONST.SEARCH.AMOUNT_MODIFIERS.LESS_THAN];

  
  

  App/src/components/Search/FilterDropdowns/AmountPopup.tsx

  Lines 139 to 148 in dd15fd9

  	{modifierConfig.map((modifier) => (
  	<MenuItem
  	key={modifier}
  	title={title[modifier]}
  	description={formatAmount(amountValues[modifier])}
  	onPress={() => setSelectedModifier(modifier)}
  	shouldShowRightIcon
  	viewMode={CONST.OPTION_MODE.COMPACT}
  	/>
  	))}

• The range state and query path already work: both bounds display as "Between" in the chip and serialize as amount>... amount<...:
  

  App/src/libs/SearchUIUtils.ts

  Lines 5013 to 5024 in dd15fd9

  	const lessThan = form[`${syntaxKey}${CONST.SEARCH.AMOUNT_MODIFIERS.LESS_THAN}`];
  	const greaterThan = form[`${syntaxKey}${CONST.SEARCH.AMOUNT_MODIFIERS.GREATER_THAN}`];
  	const equalTo = form[`${syntaxKey}${CONST.SEARCH.AMOUNT_MODIFIERS.EQUAL_TO}`];
  	const formatAmount = (val: string) => convertToDisplayStringWithoutCurrency(Number(val));
  	if (equalTo) {
  	return translate('search.filters.amount.equalTo', formatAmount(equalTo));
  	}
  	if (lessThan && greaterThan) {
  	return translate('search.filters.amount.between', formatAmount(greaterThan), formatAmount(lessThan));
  	}

  
  

  App/src/libs/SearchQueryUtils.ts

  Lines 264 to 282 in dd15fd9

  	function buildAmountFilterQuery(filterKey: SearchAmountFilterKeys, filterValues: Partial<SearchAdvancedFiltersForm>) {
  	const negatedAmount = filterValues[`${filterKey}${CONST.SEARCH.NOT_MODIFIER}`];
  	const equalTo = filterValues[`${filterKey}${CONST.SEARCH.AMOUNT_MODIFIERS.EQUAL_TO}`];
  	const lessThan = filterValues[`${filterKey}${CONST.SEARCH.AMOUNT_MODIFIERS.LESS_THAN}`];
  	const greaterThan = filterValues[`${filterKey}${CONST.SEARCH.AMOUNT_MODIFIERS.GREATER_THAN}`];
  	const amountStrings = [];
  	if (equalTo) {
  	amountStrings.push(`${filterKey}:${equalTo}`);
  	}
  	if (greaterThan) {
  	amountStrings.push(`${filterKey}>${greaterThan}`);
  	}
  	if (lessThan) {
  	amountStrings.push(`${filterKey}<${lessThan}`);
  	}

So the narrow App-side edit should be to add a Between branch/editor to AmountPopup that writes ${filterKey}GreaterThan + ${filterKey}LessThan and clears ${filterKey}EqualTo, while preserving the current single-bound behavior.