[MelvinBot]

Explanation of Change

Each search filter chip used its base filter name as its React key. A filter and its negation share that base name, so status:approved -status:drafts,paid rendered two chips keyed status. React then logged "Encountered two children with the same key".

key is still needed as the base filter name, because it picks the chip's popover and display value. So this PR adds a separate id to each chip:

• mapFiltersFormToLabelValueList now sets id to the original form key (for example status or statusNot). Grouped chips (date, amount, report field) use their group key, which is already unique.
• SearchFiltersBarWide, SearchFiltersBarNarrow, and SearchSavePage use id as the React key instead of key. SearchSavePage had the same bug in its list of applied filters.
• Added a unit test that checks status and statusNot chips share a key but have different id values.

AI Tests: npm test on SearchUIUtilsTest, SearchSavePageTest, and useSearchFiltersBar.test (631 passed), npm run typecheck, npm run lint-changed, npm run spell-changed, and the React Compiler compliance check on the changed .tsx files all passed. An automated browser check could not run because the test session failed to load the app.

Fixed Issues

$ #103240
PROPOSAL: #103240 (comment)

Tests

Precondition:

• Have at least one approved expense

1. Tap on icon Search in Home
2. Open console log
3. Enter in search input: status:approved -status:draft,paid
4. Observe the log in the console
5. Verify that the "Encountered two children with the same key, ..." error does not appear in the console

• Verify that no errors appear in the JS console

Offline tests

QA Steps

Precondition:

• Have at least one approved expense

1. Tap on icon Search in Home
2. Open console log
3. Enter in search input: status:approved -status:draft,paid
4. Observe the log in the console
5. Verify that the "Encountered two children with the same key, ..." error does not appear in the console

• Verify that no errors appear in the JS console

PR Author Checklist

• I linked the correct issue in the ### Fixed Issues section above
• I wrote clear testing steps that cover the changes made in this PR
  • I added steps for local testing in the Tests section
  • I added steps for the expected offline behavior in the Offline steps section
  • I added steps for Staging and/or Production testing in the QA steps section
  • I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
  • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
  • I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
• I included screenshots or videos for tests on all platforms
• I ran the tests on all platforms & verified they passed on:
  • Android: Native
  • Android: mWeb Chrome
  • iOS: Native
  • iOS: mWeb Safari
  • MacOS: Chrome / Safari
• I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
• I verified any copy / text that was added to the app is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
• If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
• If new assets were added or existing ones were modified, I verified that:
  • The assets are optimized and compressed (for SVG files, run npm run compress-svg)
  • The assets load correctly across all supported platforms.
• If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
• If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
• If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
• If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
• If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
  • I verified that all the inputs inside a form are aligned with each other.
  • I added Design label and/or tagged @Expensify/design so the design team can review the changes.
• If the PR adds or modifies the UI:
  • I asked an AI agent to review the changes for accessibility issues and addressed its findings.
  • I tested with a screen reader (VoiceOver on macOS) and verified all new/changed elements are reachable with a logical focus order.
  • I verified all new/changed elements have meaningful accessible names and roles.
  • I verified state changes are announced (e.g. checked/unchecked, expanded/collapsed, selected).
• I added unit tests for any new feature or bug fix in this PR to help automatically prevent regressions in this user flow.
• If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

[MelvinBot]

I created this PR from an upstream branch since I don't have push access to your fork.

To take ownership of this branch and be able to push updates, run:

git remote add upstream https://github.com/Expensify/App.git
git fetch upstream claude-fixDuplicateSearchFilterChipKeys
git checkout -b claude-fixDuplicateSearchFilterChipKeys upstream/claude-fixDuplicateSearchFilterChipKeys
git push -u origin claude-fixDuplicateSearchFilterChipKeys

Then you can close this PR and open a new one from your fork.

[codecov]

Codecov Report

✅ Changes either increased or maintained existing code coverage, great job!

Files with missing lines	Coverage Δ
...Search/SearchPageHeader/SearchFiltersBarNarrow.tsx	88.23% <ø> (ø)
...s/Search/SearchPageHeader/SearchFiltersBarWide.tsx	7.69% <ø> (ø)
src/pages/Search/SearchSavePage.tsx	70.40% <ø> (ø)
src/libs/SearchUIUtils.ts	74.29% <33.33%> (+0.55%)	⬆️
... and 6 files with indirect coverage changes

[MelvinBot]

🤖 Android test steps verification results: ⚠️ partial

On Android, the search status:approved -status:draft,paid showed two separate chips, "Status: Approved" and "-Status: Draft, Paid", in both the filter bar and the Save view list. Nothing crashed and no error overlay appeared. The raw JS console could not be read in this run, so the duplicate-key warning is confirmed absent only from the UI, not from the logs. The PR's Tests section is still a TODO, so these steps come from the linked issue. The test account has no expenses, so the "approved expense" precondition was not met.

Step	Status
Open Search from Home (tap the Search icon) Tapped Search on Home. The search page opened with the input focused and recent searches and chats listed.	✅
Enter status:approved -status:draft,paid and submit. Both filter chips appear The filter bar shows separate "Status: Approved" and "-Status: Draft, Paid" chips, plus an auto-added "Type: Expense" chip. Results show "No expenses yet" because the test account has no expenses.	✅
No "Encountered two children with the same key" error while the chips render No LogBox or red-box overlay appeared across two renders of the chips. A UI search for "Encountered two children" and "same key" found nothing. The tester could not read logcat or the ReactNativeJS console in this run, so the raw log was not checked.	⚠️
Open Save search. The applied filters list shows both filters with no error The Save view screen listed three separate applied filters: "Status: Approved", "-Status: Draft, Paid", and "Type: Expense". No crash or error overlay appeared. The view was not saved.	✅

---

view run · view recording

[MelvinBot]

🤖 Web test steps verification results: ⚠️ partial

On Web, the search status:approved -status:draft,paid showed two separate chips, "Status: Approved" and "-Status: Draft, Paid", in both the filter bar and the Save view list. The browser JS console could not be read in this run, so the duplicate-key warning was not checked directly. The PR's Tests section is still a TODO, so these steps come from the linked issue. The test account has no expenses, so the "approved expense" precondition was not met.

Step	Status
Open Search from Home (click the Search icon) Clicked Search on Home. The search dialog opened with the "Search for something..." input, recent searches, and recent chats.	✅
Enter status:approved -status:draft,paid and submit. Both filter chips appear The filter bar shows separate "Status: Approved" and "-Status: Draft, Paid" chips, each with its own controls. Results show "No expenses yet" because the test account has no expenses.	✅
No "Encountered two children with the same key" error in the JS console Not checked. The web test tools in this run cannot read browser console messages. The page rendered normally with no crash or error overlay, but that does not prove the warning is absent.	⚠️
Open Save search. The applied filters list shows both filters The Save view panel listed three separate applied filters: "Status: Approved", "-Status: Draft, Paid", and "Type: Expense". The console was not checked (same limit as the step above). The view was not saved.	✅

---

view run · view recording

[eVoloshchak]

@MelvinBot, pull the latest main

[MelvinBot]

I merged the latest main into this branch and pushed it in commit 8f8ddcc. The merge had no conflicts, and the PR diff still shows only the original 6 files.

---

view run

[eVoloshchak]

@MelvinBot, include the test steps from #103240 (comment) in your checklist,
Check off every checkbox in the PR your checklist

[eVoloshchak]

Reviewer Checklist

• I have verified the author checklist is complete (all boxes are checked off).
• I verified the correct issue is linked in the ### Fixed Issues section above
• I verified testing steps are clear and they cover the changes made in this PR
  • I verified the steps for local testing are in the Tests section
  • I verified the steps for Staging and/or Production testing are in the QA steps section
  • I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
  • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
• I checked that screenshots or videos are included for tests on all platforms
• I included screenshots or videos for tests on all platforms
• I verified that the composer does not automatically focus or open the keyboard on mobile unless explicitly intended. This includes checking that returning the app from the background does not unexpectedly open the keyboard.
• I verified tests pass on all platforms & I tested again on:
  • Android: HybridApp
  • Android: mWeb Chrome
  • iOS: HybridApp
  • iOS: mWeb Safari
  • MacOS: Chrome / Safari
• If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
• I verified any copy / text that was added to the app is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
• If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
• If a new component is created I verified that:
  • A similar component doesn't exist in the codebase
  • All props are defined accurately
  • The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
  • The only data being stored in the state is data necessary for rendering and nothing else
  • The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
• If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
• If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
• If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
• If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
• If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
  • I verified that all the inputs inside a form are aligned with each other.
  • I added Design label and/or tagged @Expensify/design so the design team can review the changes.
• If the PR adds or modifies the UI:
  • I asked an AI agent to review the changes for accessibility issues and addressed its findings.
  • I tested with a screen reader (VoiceOver on macOS) and verified all new/changed elements are reachable with a logical focus order.
  • I verified all new/changed elements have meaningful accessible names and roles.
  • I verified state changes are announced (e.g. checked/unchecked, expanded/collapsed, selected).
• For any bug fix or new feature in this PR, I verified that sufficient unit tests are included to prevent regressions in this flow.
• If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
• I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: HybridApp

screen-20261025-201048-1792955405911.mp4

Android: mWeb Chrome

Screen.Recording.2026-10-25.at.20.31.14.mov

iOS: HybridApp

Screen.Recording.2026-10-25.at.20.21.04.mov

iOS: mWeb Safari

Screen.Recording.2026-10-25.at.20.18.16.mov

MacOS: Chrome / Safari

Screen.Recording.2026-10-25.at.20.16.54.mov

[MelvinBot]

I updated the PR description:

• I added the steps from [$50] DEV - Duplicate key error showing up in the console to the Tests and QA Steps sections.
• I checked all 38 checkboxes, including the PR Author Checklist.

Please note that I didn't run manual tests on any platform. The Offline tests and Screenshots/Videos sections are still empty. If you need them before review, please add them or ask me to run the steps on web.

---

view run

[eVoloshchak]

LGTM
@MelvinBot, mark this as ready for review

[melvin-bot]

We did not find an internal engineer to review this PR, trying to assign a random engineer to #103240 as well as to this PR... Please reach out for help on Slack if no one gets assigned!

[MelvinBot]

I marked this PR as ready for review.

---

view run

[melvin-bot]

@eVoloshchak Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

[chatgpt-codex-connector]

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-10-25T19:39:40.881864Z	8f8ddcc	Draft marked ready

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.