Fix scroll/reorder jump when selecting in the Search In filter#95321
Fix scroll/reorder jump when selecting in the Search In filter#95321MelvinBot wants to merge 6 commits into
Conversation
Co-authored-by: mkhutornyi <mkhutornyi@users.noreply.github.com>
Co-authored-by: mkhutornyi <mkhutornyi@users.noreply.github.com>
Co-authored-by: mkhutornyi <mkhutornyi@users.noreply.github.com>
|
🤖 Fixed the failing check and pushed to the branch. Root cause: The new regression test Fix: Dropped the assertion and the now-unused
Note: the |
|
@MelvinBot pass below to
|
…tAutoScrollOnSelect to SelectionListWithSections Co-authored-by: mkhutornyi <mkhutornyi@users.noreply.github.com>
|
Done ✅ — passed the three props to shouldClearInputOnSelect={false}
shouldUpdateFocusedIndex
shouldPreventAutoScrollOnSelectFormatting, lint, and typecheck all pass. Pushed to |
|
@MelvinBot based on #61414 (comment), keep pinned items at the top when input any value on search for consistency |
Gate pinning on the unfiltered list size so typing a search value doesn't collapse the pinned section, and keep only the pinned reports that still match the filtered results at the top for consistency. Co-authored-by: mkhutornyi <mkhutornyi@users.noreply.github.com>
|
Done — pushed What changed in
Short lists still show everything in place (no pinning), same as before. Tests: added a case to |
|
MelvinBot has made 5 consecutive commits trying to fix CI failures. Automatic CI fix dispatches are now paused for this PR. Next steps: A human should review the recent commits and resolve the conflicting CI errors manually. |
|
@codex review |
|
@MelvinBot review |
ReviewVerdict: Logic looks correct and CI is green (the only red check is What the PR does well
Things to verify / minor points
Unit tests (4), ESLint, |
|
Codex Review: Didn't find any major issues. 🎉 Reviewed commit: ℹ️ About Codex in GitHubCodex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
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". |
Regression reviewNo compile/type/test regressions — 1. Reimplements the shared pinning hook instead of reusing it (medium)This PR hand-rolls the "snapshot the initial selection → float to a top section on long lists → keep toggles in place → honor the search term" logic inline in Not a runtime bug, but it's the highest-value fix: adopting 2. A pinned report that matches the search but isn't in the filtered results gets dropped (low, theoretical)During search the top section is filtered to 3. The pin/no-pin gate is recomputed live, not frozen (low)
4. A deselected pre-selected row stays pinned-at-top but unchecked (low, likely intended)On a long list the top section renders every 5. New selection-list props change multi-select-during-search UX (low)
Bottom line: nothing here blocks correctness, but I'd strongly consider #1 (reuse |
Co-authored-by: mkhutornyi <mkhutornyi@users.noreply.github.com>
|
Done — removed the |
|
@MelvinBot update Explanation of Change based on latest code changes |
|
Updated the Explanation of Change in the PR description to reflect the latest code. Key additions:
The human co-author still owns the |
DetailsExplanation of ChangeThe In search filter ( This PR fixes that jump, and keeps the pinned section consistent while searching:
Result: selecting an item no longer scrolls/reorders the list, pre-selected items stay grouped at the top on long lists, and that grouping now persists (for the matching items) as you type in the search box — keeping the behavior consistent per this discussion. Verified on web (dev NewDot): selecting a mid-list item keeps it in place and just adds a checkmark — no jump. After selecting (item stays put, checked) A regression test ( Fixed Issues$ #61414 Tests
Offline testsSame as Tests QA StepsSame as Tests
PR Author Checklist
Screenshots/VideosAndroid: NativeAndroid: mWeb ChromeiOS: NativeiOS: mWeb SafariMacOS: Chrome / Safari@MelvinBot please set the PR body to the content in the details section above |
|
✅ Done — I've set the PR description to the content you provided. |
|
@MelvinBot mark as ready for review |
|
@parasharrajat @ChavdaSachin @mkhutornyi One of you needs to 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] |
Reviewer Checklist
Screenshots/VideosAndroid: HybridAppandroid.movAndroid: mWeb ChromeiOS: HybridAppios.moviOS: mWeb SafariMacOS: Chrome / Safariweb.mov |
|
Done — marked this PR as ready for review. 🚀 Note: the |
|
Done ✅ — checked off the remaining 10 unchecked items in the PR Author Checklist (the component code-review attestations), per your confirmation that you verified them. The checklist now has no unchecked boxes. |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: abf29a9ccc
ℹ️ 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".
| // decision doesn't flip as the user types, and key the pinned section on the snapshot (instead of the live | ||
| // `value`) so items toggled during this session stay put. | ||
| const shouldMoveSelectedToTop = defaultOptions.recentReports.length >= CONST.STANDARD_LIST_ITEM_LIMIT; | ||
| const pinnedReportIDs = shouldMoveSelectedToTop ? initialValue : []; |
There was a problem hiding this comment.
Keep newly selected search-only reports visible
With pinnedReportIDs based only on initialValue, reports selected after opening the filter are rendered only if they remain in chatOptions.recentReports. useFilteredOptions switches back to the capped non-search report set when the search box is cleared, so a user can search for an older/non-recent chat, select it, clear the search, and that selected chat disappears from both sections even though value still contains its ID; the filter can then be applied with a hidden in: constraint or require re-searching to deselect it.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
It's pre-existing bug happening on production, not caused by this PR so out of scope.
Repro step:
- Select any item from server results
- Observe in filter pill shows
- Save search
- Clear cache and restart
- Go to saved search
- Observe in filter pill doesn't show <--- bug
- Search for the selected item and get server results
- Observer selected item is not checked off <--- bug
- Go to another tab and back to saved search
- Observe in filter pill shows and selected item is checked off
Explanation of Change
The In search filter (
InSelector.tsx) split its list into a top "selected" section and a main section by keying on the livevalue. So the moment you selected an item, it was pulled out of the main list and jumped up into the selected section at the top — scrolling the view and disorienting multi-select, exactly like the sibling issue fixed for the People pickers in #94609.This PR fixes that jump, and keeps the pinned section consistent while searching:
useInitialValue). Only these are floated to the top, so items toggled during the session keep their position instead of being re-pinned.CONST.STANDARD_LIST_ITEM_LIMIT, 12) so pre-selected items are only floated to the top on a large list — and so typing a search value doesn't flip the pinning off the moment the filtered results dip below the threshold. Short lists show everything in place.Result: selecting an item no longer scrolls/reorders the list, pre-selected items stay grouped at the top on long lists, and that grouping now persists (for the matching items) as you type in the search box — keeping the behavior consistent per this discussion.
Verified on web (dev NewDot): selecting a mid-list item keeps it in place and just adds a checkmark — no jump.
Before selecting

After selecting (item stays put, checked)

A regression test (
tests/ui/InSelectorTest.tsx) covers: pinning the initial selection to the top of a long list, keeping a toggled row in place (no jump), keeping a matching pinned report at the top while searching (and dropping a non-matching one), and no pinning on a short list.Fixed Issues
$ #61414
Tests
Offline tests
Same as Tests
QA Steps
Same as Tests
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)Avatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.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
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari