Fix: add search bar to lists with items above 15#60488
Fix: add search bar to lists with items above 15#60488roryabraham merged 29 commits intoExpensify:mainfrom
Conversation
|
@thesahindia 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] |
|
🚧 @shawnborton has triggered a test app build. You can view the workflow run here. |
This comment has been minimized.
This comment has been minimized.
|
Otherwise generally the functionality feels nice and snappy to me! |
|
Can you show us all of the pages where you added this? I assume for things like distance rates, members, tags, categories, maybe even report fields? |
|
Agree with all of Shawn's comments above, but yeah this is feeling pretty good! |
|
Great callouts, @shawnborton . Just tested the test build and other than those comments this is looking great 👍 Just a sidenote for designers that there's an interesting case when you multi-select. We could decide to do nothing here or we could decide to clear the selection or search filter when interacting with it. I think we wanna do nothing, but just mentioning it: CleanShot.2025-04-22.at.10.07.34.mp4While it's weird that you have selections that aren't shown, but I think it's weirder if we start messing with their interactions. Given you might wanna select "Car", then search for "Entertainment" and select that, then another etc. Thoughts? |
|
Great find and great points - I think I agree with the "do nothing" approach for now then, because as you say, you might want to filter, find something, select it, and then clear the filter and do something with all of your selections. |
|
If that's the case, how about we display both filtered results and selected results in the page? The selected items will be placed on top of the list for better view. I think I can work on that. |
|
I think the idea is to do nothing here. So just leave the behavior as it currently is. cc @Expensify/design for gut check. |
|
I'm fine with doing nothing for now. I think if we find that people are using it and getting confused, we can try displaying both selected and filtered. But for now, I'm down to do nothing and leave as is. |
|
Here's the updated Icon: Screen.Recording.2025-04-22.at.22.51.19.movcc @shawnborton |
Performance Comparison Report 📊 (5/12)Meaningless Changes To Duration (4/11)Show entries
Show details
|
Performance Comparison Report 📊 (6/12)Meaningless Changes To Duration (5/11)Show entries
Show details
|
Performance Comparison Report 📊 (7/12)Meaningless Changes To Duration (6/11)Show entries
Show details
|
Performance Comparison Report 📊 (8/12)Meaningless Changes To Duration (7/11)Show entries
Show details
|
Performance Comparison Report 📊 (9/12)Meaningless Changes To Duration (8/11)Show entries
Show details
|
|
@Expensify/mobile-deployers 📣 Please look into this performance regression as it's a deploy blocker. |
|
🚀 Deployed to staging by https://github.com/roryabraham in version: 9.1.42-0 🚀
|
|
🚀 Deployed to staging by https://github.com/roryabraham in version: 9.1.43-5 🚀
|
|
🚀 Deployed to production by https://github.com/francoisl in version: 9.1.44-8 🚀
|
| const filtered = normalizedSearchQuery.length ? data.filter((item) => filterData(item, normalizedSearchQuery)) : data; | ||
| const sorted = sortData(filtered); | ||
| setResult(sorted); |
| [allSubRates, selectedPerDiem, canSelectMultiple, styles.flex2, styles.alignItemsStart, styles.textSupporting, styles.label, styles.pl2, styles.alignSelfEnd], | ||
| ); | ||
|
|
||
| const filterRate = useCallback((rate: PolicyOption, searchInput: string) => !!rate.text?.toLowerCase().includes(searchInput), []); |
There was a problem hiding this comment.
We forgot to run the filter on the subrate name, which caused #74879









Explanation of Change
Fixed Issues
$ #59864
PROPOSAL: #59864 (comment)
Tests
Offline tests
QA Steps
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Screen.Recording.2025-04-21.at.09.42.03.mov
Android: mWeb Chrome
Screen.Recording.2025-04-21.at.09.53.29.mov
iOS: Native
Screen.Recording.2025-04-21.at.09.53.53.mov
iOS: mWeb Safari
Screen.Recording.2025-04-21.at.09.59.02.mov
MacOS: Chrome / Safari
Screen.Recording.2025-04-21.at.10.19.28.mov
MacOS: Desktop
Screen.Recording.2025-04-21.at.10.20.10.mov