Fix the tappable nested rows on group by results on mobile.#76608
Conversation
Signed-off-by: krishna2323 <belivethatkg@gmail.com>
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.
|
Signed-off-by: krishna2323 <belivethatkg@gmail.com>
Signed-off-by: krishna2323 <belivethatkg@gmail.com>
Signed-off-by: krishna2323 <belivethatkg@gmail.com>
|
@MarioExpensify 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] |
| hoverStyle={[!transaction.isDisabled && styles.hoveredComponentBG]} | ||
| dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true, [CONST.INNER_BOX_SHADOW_ELEMENT]: false}} | ||
| id={transaction.transactionID} | ||
| > |
There was a problem hiding this comment.
❌ PERF-4 (docs)
Inside the .map() callback (line 192), new arrow function instances are created on every iteration for onPress and onLongPress. React uses referential equality to determine if props changed, so these new function instances on every render trigger unnecessary re-renders of the PressableWithFeedback component.
Suggested fix: Memoize the callbacks with useCallback:
const handleOnPressCallback = useCallback(
(transaction: TransactionListItemType) => () => handleOnPress(transaction),
[handleOnPress]
);
const handleOnLongPressCallback = useCallback(
(transaction: TransactionListItemType) => () => onLongPress?.(transaction),
[onLongPress]
);
// Then in the map:
<PressableWithFeedback
onPress={handleOnPressCallback(transaction)}
onLongPress={handleOnLongPressCallback(transaction)}
// ... other props
>Or alternatively, pass the transaction via a data attribute and use a single memoized handler.
|
Why is tapping on the expense closing the group/report? Shouldn't it open the expense? The select mode part looks good though |
|
@getusha has moved to the backend contributors team, so we can probably have an frontend C+ take the review of this. @jayeshmangwani you're back from OOO. Do you have the bandwidth to prioritise this one today or tomorrow? |
|
@trjExpensify, sure. I can handle this as C+ and will review it today. |
|
Thank you! |
|
|
@Krishna2323 I’m encountering a bug on iOS and want to check if you can reproduce it:
selection-bug.movExpected: Only that specific child report becomes unselected. Actual: All selected reports are unselected. |
|
@jayeshmangwani fixed both issues. |
|
@jayeshmangwani Can you please re-review? |
|
Yes, sure. checking now. |
|
@Krishna2323, I’m seeing an issue with the selection. Try selecting 3 report groups, and then select a few others, For me selection stops working after the third one. selection-bug-1.mov |
|
And BTW, the caret is missing in the row in the latest code. |
If you're talking about the expense rows that you see once you expand a report on mobile, I believe that is expected. |
Yes, I’m talking about the expense rows after they expand, but we now need to add the caret as mentioned in this comment #76129 (comment). |
|
Ah yes you're right! My bad, sorry about that. |
@jayeshmangwani this happens only when selecting reports that don’t have their transactions loaded. This also happens on main.
I’ve fixed this — a prop was accidentally removed while resolving conflicts. Monosnap.screencast.2025-12-11.14-39-29.mp4 |
|
@JS00001 @MarioExpensify This issue #76608 (comment) happens on the main as well, so I think we can report it and create a new issue for it. |
@Krishna2323 , can you push the latest code? I still can’t see the caret in the newest version. |
Signed-off-by: krishna2323 <belivethatkg@gmail.com>
Signed-off-by: krishna2323 <belivethatkg@gmail.com>
Sorry, I forgot to push the commit — it’s updated now. |
Reviewer Checklist
Screenshots/VideosAndroid: HybridAppAndroid.movAndroid: mWeb Chromemweb-chrome.moviOS: HybridAppios.moviOS: mWeb Safarimweb-safari.movMacOS: Chrome / Safariweb.mov |
|
@Krishna2323 please select |
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚀 Deployed to staging by https://github.com/JS00001 in version: 9.2.78-0 🚀
|
|
🚀 Deployed to production by https://github.com/AndrewGable in version: 9.2.78-8 🚀
|
Explanation of Change
Fixed Issues
$ #76129
PROPOSAL:
Tests
Pre-requisite: Mobile-only
Offline tests
QA Steps
Same as tests
Verify that no errors appear in the JS console
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectioncanBeMissingparam foruseOnyxtoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, 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.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
android_native.mp4
Android: mWeb Chrome
android_chrome.mp4
iOS: Native
ios_native.mp4
iOS: mWeb Safari
ios_safari.mp4
MacOS: Chrome / Safari
web_chrome.mp4