Rework search input to be a keyword search only by bernhardoj · Pull Request #93543 · Expensify/App

bernhardoj · 2026-06-14T09:40:22Z

Explanation of Change

Fixed Issues

$ #92924
PROPOSAL:

Tests

Same as QA Steps

Verify that no errors appear in the JS console

Offline tests

Same as QA Steps

QA Steps

Go to Spend
Press the search input and search for anything
Verify it applies a keyword filter
Press the Filters button > Keyword
Verify that the keyword on the search input is shown in the Keyword filter
Enter anything in the Keyword filter
Verify the new value is reflected in the search input
Press "X" button on the search input
Verify the input is cleared, and the keyword filter is removed

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

ios.mp4

iOS: mWeb Safari

ios.mweb.mp4

MacOS: Chrome / Safari

web.mp4

melvin-bot · 2026-06-14T09:40:29Z

@Ollyws 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

Here are some automated review suggestions for this pull request.

Reviewed commit: 587eb7ac8e

ℹ️ About Codex in GitHub

Codex has been enabled to automatically 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".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

chatgpt-codex-connector · 2026-06-14T09:45:45Z

+    const keywordQuery = buildFilterValuesString(CONST.SEARCH.SYNTAX_FILTER_KEYS.KEYWORD, keywordFilters).trim();
+
+    function submitSearch(query: string) {
+        const queryWithContext = getKeywordQueryWithCurrentSearchContext(query, queryJSON);


Preserve keyword-only semantics before parsing input

When the new search-page input receives text that is valid search syntax, such as type:expense, merchant:Amazon, or amount>10, it is passed directly into getKeywordQueryWithCurrentSearchContext and then parsed by getQueryWithUpdatedValues, so the text becomes root fields or filters instead of the keyword filter this field is supposed to edit. In those cases the search can switch type/add filters or carry stale context rather than applying the entered text as a keyword; escape/wrap the user text as a keyword value (or otherwise keep explicit syntax out of this path) before composing the query.

Useful? React with 👍 / 👎.

Oh, interesting, but this is probably out of scope. This is happening on prod too.

@trjExpensify should we handle the keyword escaping here?

Is it out of scope? 🤔 On production right now the search input above the table accepts syntax doesn't it? Whereas this change is it to move the query search input to the top right, and make the search input above the table keyword only.

So with that, I think we probably do need to do something about this here to accommodate the desired change.

CC: @JS00001 @Expensify/design

On prod, we can replicate it by typing the keyword in the keyword filter.

web.mp4

codecov · 2026-06-14T10:22:46Z

Codecov Report

❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.

Files with missing lines	Coverage Δ
src/ONYXKEYS.ts	`100.00% <ø> (ø)`
src/ROUTES.ts	`20.80% <100.00%> (-0.08%)`	⬇️
...lterDropdowns/SearchAdvancedFiltersPopup/index.tsx	`0.00% <ø> (ø)`
.../components/Search/FilterDropdowns/SortByPopup.tsx	`2.94% <ø> (ø)`
...mponents/Search/FilterDropdowns/SortOrderPopup.tsx	`0.00% <ø> (ø)`
src/components/Search/SearchAutocompleteInput.tsx	`95.89% <ø> (ø)`
...Search/SearchPageHeader/SearchActionsBarNarrow.tsx	`100.00% <100.00%> (ø)`
...Search/SearchPageHeader/SearchPageHeaderNarrow.tsx	`85.71% <ø> (ø)`
...s/Search/SearchPageHeader/SearchPageHeaderWide.tsx	`0.00% <ø> (ø)`
...ts/Search/SearchPageHeader/useSearchFiltersBar.tsx	`18.96% <ø> (ø)`
... and 26 more
... and 18 files with indirect coverage changes

dubielzyk-expensify · 2026-06-15T00:19:11Z

Videos look good to me 👍 Shall we run an adhoc?

shawnborton · 2026-06-15T06:43:15Z

Let's run it 🚀 will build now

github-actions · 2026-06-15T06:44:56Z

🚧 @shawnborton has triggered a test Expensify/App build. You can view the workflow run here.

shawnborton · 2026-06-15T07:58:14Z

I don't think I would expect needing to press enter to actually trigger this search, I would think we'd start searching pretty much as you type?

CleanShot.2026-06-15.at.09.56.51.mp4

Also, note that we get a little jumping of the table when the skeleton comes in - the skeleton is not located at the same exact point as the table is so we get the vertical shifting.

trjExpensify · 2026-06-15T10:32:54Z

I don't think I would expect needing to press enter to actually trigger this search, I would think we'd start searching pretty much as you type?

Oh hm, isn't that going to result in us needing to call the Search API after every letter typed or something though? 🤔

JS00001 · 2026-06-15T13:25:41Z

I think we should search on enter rather than basing it on the input changing (debounced or not)

aimane-chnaif · 2026-06-17T07:41:15Z

keyword	filter pills	Is "X clear" visible?
Yes	Yes	Yes
No	Yes	Yes
Yes	No	No
No	No	No

@trjExpensify my question was that if "X clear" should also clear keyword, why No (bold) when has keyword?
For now, "X clear" visibility purely depends on pills visibility.

Looks like everyone agreed the behavior on the adhoc build. So ignore my concern.

…the search page

bernhardoj · 2026-06-17T08:02:35Z

Not really sure what's going on here, I sometimes get stuck on this no results page when messing around with entering search query syntax and other times it actually sets a filter via the syntax entry:

Fixed by escaping the input.

It will wrap any keyword with (xx:xx) pattern with a quote ("").

For example, if we input type:expense test, the escaped input becomes "type:expense" test.

But it will also escape invalid syntax.

For example, whatever:value test => "whatever:value" test

There is no harm in doing so, though, so I left it as is to avoid making the escaping code complex.

On that note, it doesn't look like the router retains the search I entered the next time I open it by clicking the 🔍? (Not CMD+K which should still open an an unobstructed router to chat switch).

Fixed

JS00001 · 2026-06-17T11:31:33Z

conflicts!

This reverts commit e64c58f.

bernhardoj · 2026-06-17T14:51:14Z

Fixed

aimane-chnaif · 2026-06-17T15:45:06Z

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 proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
- I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and 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)
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
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)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.ts or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- 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
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- 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 any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
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 a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
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

Android: mWeb Chrome

iOS: HybridApp

iOS: mWeb Safari

MacOS: Chrome / Safari

github-actions · 2026-06-17T22:41:26Z

🚧 @trjExpensify has triggered a test Expensify/App build. You can view the workflow run here.

trjExpensify · 2026-06-18T00:04:45Z

On that note, it doesn't look like the router retains the search I entered the next time I open it by clicking the 🔍? (Not CMD+K which should still open an an unobstructed router to chat switch).

Fixed

Doesn't seem like it on the adhoc build.

2026-06-18_01-03-31.mp4

trjExpensify · 2026-06-18T00:07:49Z

#93543 (comment)

Same, no change.

2026-06-18_01-06-29.mp4

bernhardoj · 2026-06-18T03:18:54Z

Hmm, that's weird, it works fine when I test it on the AdHoc build

w.mp4

trjExpensify · 2026-06-18T11:09:44Z

Okay, weird. I even tried to clear cache last night. I can see changes now though.

So back to this. Can you see my video on how staging works, and follow that?

On this adhoc build:

It's always there in the router (which is maybe what we'll do long term, but it was requested to separate that consideration out to later here).
When I CMD+K to open the router, the input isn't clear, so chat switching is obstructed.

Compare to my video on staging of the router:

The router is empty initially when I open it
I enter the syntax and search
I reopen the router and the syntax is kept to add to if I want.
If I CMD+K, it's a clean router for unobstructed chat switching.

So we want to keep doing that for now. Can you do that?

bernhardoj · 2026-06-18T13:51:03Z

Ah I see. Let me try.

bernhardoj · 2026-06-18T15:00:47Z

@trjExpensify a few clarification questions:

If I enter merchant:test in search router and reopen the search router, should it show type:expense merchant:test or merchant:test.
After step 1, should the keyword input and other filters from the filters popup popuplate the search router input? For example, if I enter test in the keyword input and apply Has Receipt filter from the filters popup, when I open the search router, should it show merchant:test has:receipt test or merchant:test ?
When I switch between search suggestions (Expense, Reports, Cash acrruals, etc.), should the search router input be cleared?

Basically I need a clarification whether it should work similarly to the current search input we have in staging/prod or should it only keep the last input.

trjExpensify · 2026-06-18T15:07:44Z

Basically I need a clarification whether it should work similarly to the current search input we have in staging/prod or should it only keep the last input.

Like it works today on staging/prod is where we want to start. 👍

type:merchant
Yes
Yes

2026-06-18_16-09-12.mp4

bernhardoj · 2026-06-19T05:09:50Z

@trjExpensify done, please check again

trjExpensify · 2026-06-19T16:04:03Z

Running a fresh build.

github-actions · 2026-06-19T16:05:54Z

🚧 @trjExpensify has triggered a test Expensify/App build. You can view the workflow run here.

github-actions · 2026-06-19T16:13:34Z

🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
Built from App PR #93543.

Android 🤖	iOS 🍎
⏩ SKIPPED ⏩	⏩ SKIPPED ⏩
The build for Android was skipped	The build for iOS was skipped

Web 🕸️
https://93543.pr-testing.expensify.com

👀 View the workflow run that generated this build 👀

trjExpensify

That was fixed for me now. Thanks! 👍

bernhardoj added 4 commits June 14, 2026 17:27

show search button

d0891e0

rework search input to be a keyword search only

f35bba7

Merge branch 'main' into feat/92924-rework-search-input

74eef38

remove keyword filter when pressing clear

587eb7a

bernhardoj requested review from a team as code owners June 14, 2026 09:40

melvin-bot Bot assigned bernhardoj Jun 14, 2026

melvin-bot Bot requested review from Ollyws and trjExpensify and removed request for a team June 14, 2026 09:40

remove unused type

4b20314

chatgpt-codex-connector Bot reviewed Jun 14, 2026

View reviewed changes

bernhardoj added 2 commits June 14, 2026 18:17

fix test

89865db

lint

60427c5

bernhardoj added 2 commits June 14, 2026 18:23

remove unused type

28757c1

lint

720f467

remove unused import

70ceeaa

This comment has been minimized.

Sign in to view

trjExpensify requested a review from JS00001 June 15, 2026 10:38

Merge branch 'main' into feat/92924-rework-search-input

eb40f27

populate initial search router input value from the current query on …

0c52112

…the search page

do the escaping on the deeper function

b3bc0c8

bernhardoj added 4 commits June 17, 2026 22:29

Merge branch 'main' into feat/92924-rework-search-input

706f66f

merge with main leftover

e64c58f

Revert "merge with main leftover"

f1f5a7c

This reverts commit e64c58f.

restore previous change

de2661d

This comment has been minimized.

Sign in to view

Merge branch 'main' into feat/92924-rework-search-input

1b2c955

bernhardoj added 3 commits June 19, 2026 11:58

add back the raw query logic

b8ff0b2

change the position

e709e9b

show the current query on the search router

b92c474

fix test

7cc73c8

trjExpensify approved these changes Jun 19, 2026

View reviewed changes

Conversation

bernhardoj commented Jun 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

melvin-bot Bot commented Jun 14, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Jun 14, 2026

Choose a reason for hiding this comment

Uh oh!

bernhardoj Jun 14, 2026

Choose a reason for hiding this comment

Uh oh!

trjExpensify Jun 15, 2026

Choose a reason for hiding this comment

Uh oh!

bernhardoj Jun 15, 2026

Choose a reason for hiding this comment

Uh oh!

codecov Bot commented Jun 14, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

dubielzyk-expensify commented Jun 15, 2026

Uh oh!

shawnborton commented Jun 15, 2026

Uh oh!

github-actions Bot commented Jun 15, 2026

Uh oh!

This comment has been minimized.

shawnborton commented Jun 15, 2026

Uh oh!

trjExpensify commented Jun 15, 2026

Uh oh!

JS00001 commented Jun 15, 2026

Uh oh!

aimane-chnaif commented Jun 17, 2026

Uh oh!

bernhardoj commented Jun 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

JS00001 commented Jun 17, 2026

Uh oh!

bernhardoj commented Jun 17, 2026

Uh oh!

aimane-chnaif commented Jun 17, 2026

Reviewer Checklist

Screenshots/Videos

Uh oh!

github-actions Bot commented Jun 17, 2026

Uh oh!

This comment has been minimized.

trjExpensify commented Jun 18, 2026

Uh oh!

trjExpensify commented Jun 18, 2026

Uh oh!

bernhardoj commented Jun 18, 2026

Uh oh!

trjExpensify commented Jun 18, 2026

Uh oh!

bernhardoj commented Jun 18, 2026

Uh oh!

bernhardoj commented Jun 18, 2026

Uh oh!

trjExpensify commented Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bernhardoj commented Jun 19, 2026

Uh oh!

trjExpensify commented Jun 19, 2026

bernhardoj commented Jun 14, 2026 •

edited

Loading

codecov Bot commented Jun 14, 2026 •

edited by github-actions Bot

Loading

bernhardoj commented Jun 17, 2026 •

edited

Loading

trjExpensify commented Jun 18, 2026 •

edited

Loading