[$250] mWeb - Reports - App crashes when using device´s back button after a search on "Reports"

@ikevin127

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Version Number: 9.1.2-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
Email or phone of affected tester (no customers): ibellicotest+282@gmail.com
Issue reported by: Applause Internal Team
Device used: Motorola MotoG60 - Android 12 - Chrome
App Component: Search

Action Performed:

Open the staging.new.expensify.com website.
Open "Reports" section.
Tap on "Search for something" and write any word.
Tap on the enter button on the keyboard.
Use device´s back button.
Check the website behaviour after this action.

Expected Result:

User should be able to return to expenses list after using device´s back button.

Actual Result:

App crashes when using device´s back button after triggering a search on "Reports" section.

Workaround:

Unknown

Platforms:

Screenshots/Videos

Bug6748765_1740038286838!log.txt
https://github.com/user-attachments/assets/264fa9f1-3a31-4d19-9802-6e4617c02fb2

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021892972906702803151
Upwork Job ID: 1892972906702803151
Last Price Increase: 2025-03-07

Issue Owner

Current Issue Owner: @ikevin127

@bfitzexpensify

Triggered auto assignment to @bfitzexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

Job added to Upwork: https://www.upwork.com/jobs/~021892972906702803151

@ikevin127

Triggered auto assignment to Contributor-plus team member for initial proposal review - @ikevin127 (External)

@luacmartins

🔄 This could be caused by the new search UI implementation:

[Due for payment 2025-02-27] [$250] Update Search page to always show search input and type tabs at the top #52317
Redesign search to always show search input(mobile + desktop). #55078 (first PR - was reverted)
Add search input to mobile search page(with fixed performance) #56326 (this was the revert follow-up)
a few other follow-up after the one above

cc @luacmartins @SzymczakJ Wdyt, is this issue related or it was happening before the new search UI implementation ?

Note: Also feels like there's 2 issues here, OP mentions that after you type something, you tap the soft keyboard Enter key then UI looks like no search was performed, whereas in my video below I actually tapped on the search suggestion and this way search was actually performed - but the navigation back bug / crash happens regardless of this.

I remember reviewing this issue where we did some work on the mWeb side for tapping search page soft keyboard Enter:

[HOLD for payment 2025-01-17] [$250] Android/iOS- Highlighted search result go to search page rather that the highlighted detail page #53401

details where we clarified behaviour can be seen in this comment, but the new Search UI implementation might've removed that logic since search is not happening on the same page, resulting in the OP behaviour regarding search not actuallly being performed when tapping the soft keyboard Enter button.

🟢 I can consistently reproduce the issue, here's the video and error:

Android: mWeb	Error
screen-20250221-182536.mp4	Screen.Recording.2025-02-21.at.18.27.04.mov

I've looked into this a bit and the crash occurs when Animated.View has an exiting animation and contains a conditional child component. Simplified example:

<Animated.View exiting={FadeOutRight}>
    <ChildComponent />
    {condition && <ChildComponent />}
    <ChildComponent />
</Animated.View>

When I hardcode condition to true, it crashes with a slightly different message:

Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

I think this happens because react-native-reanimated modifies the DOM directly, causing React to fail when applying changes from its virtual DOM. The crash no longer occurs when I comment out this lines.

As a workaround, we can wrap child elements with a View so that Animated.View doesn't have conditional child components:

<Animated.View exiting={FadeOutRight}>
    <View>
        <ChildComponent />
        {condition && <ChildComponent />}
        <ChildComponent />
    </View>
</Animated.View>

The original Animated.View code in Expensify/App is here, and child components are here.

BTW this issue is also reproducible in desktop Chrome with a narrow layout.

@tomekzaw

@tomekzaw I thought this was the issue we fixed last week. Could you take a look into this please?

@NJ-2020

@NJ-2020 it seems that it doesn't happen anymore. As far as I can see @Kicu removed FreezeWrapper in this commit, so it doesn't crash.

Thanks

🟢 I confirm that the issue is not reproducible anymore in staging (v9.1.9-6) nor develop (v9.1.9-6) latest main.

Nice. I think we can close this issue then.

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

Issue not reproducible during KI retests. (First week)

@ikevin127

@ikevin127 Whoops! This issue is 2 days overdue. Let's get this updated quick!

@luacmartins

Nice. I think we can close this issue then.

@luacmartins I agree!

[Web LA] Fix interaction with `react-freeze` (software-mansion#7114)

Navigation Menu

Repository navigation

[$250] mWeb - Reports - App crashes when using device´s back button after a search on "Reports" #57169

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

24 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[$250] mWeb - Reports - App crashes when using device´s back button after a search on "Reports" #57169

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Feb 20, 2025

melvin-bot commented on Feb 21, 2025

melvin-bot commented on Feb 21, 2025

ikevin127 commented on Feb 22, 2025

andriivitiv commented on Feb 22, 2025

luacmartins commented on Feb 24, 2025

24 remaining items

m-bert commented on Mar 6, 2025

NJ-2020 commented on Mar 6, 2025

ikevin127 commented on Mar 6, 2025

luacmartins commented on Mar 6, 2025

melvin-bot commented on Mar 7, 2025

mvtglobally commented on Mar 7, 2025

melvin-bot commented on Mar 10, 2025

ikevin127 commented on Mar 10, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions