[$1000] Web - App crashes when selecting `Translate to "Language"` by right clicking on chrome in login screen

If you haven’t already, check out our contributing guidelines for onboarding and email [e-mail] to request to join our Slack channel!

---

Action Performed:

1. Open login page - right click and press on Translate to “Language”.
2. Fill email id and press on continue.
3. Press go back on Not email-id:`Go back.
4. Press continue again on login screen.
5. Press go back again.

Expected Result:

App shouldn’t crash if webpage translate enabled.

Actual Result:

App crashing randomly on user actions.

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web

Version Number: 1.2.36-2 Reproducible in staging?: Y Reproducible in production?: Y Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Notes/Photos/Videos:

https://user-images.githubusercontent.com/43996225/206266863-31e973a5-6831-40b3-bd49-0b0421758445.mov

https://user-images.githubusercontent.com/43996225/206266893-636a5e2b-466c-4348-8f79-01bc86a2f664.mp4

Expensify/Expensify Issue URL: Issue reported by: @jatinsoni Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1670389024141949

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01127b45e8eb04373b
• Upwork Job ID: 1600592978997096448

[eVoloshchak]

This is a bug in Chromium and it is being tracked here. There is some discussion, looks like it’s going to be fixed eventually (there was activity 11 hours ago, but this issue seems to closed)

Due to the size of the fix and the fact that it could fundamentally change how we do things in the JS, we haven’t prioritized it yet. We’ll keep this in mind since we do plan on doing some major revisions in the next year or so.

There’s a workaround, but it will make the app a little bit slower (I haven’t measured by how much)

For now I’m going to recommend React users affected by this to monkeypatch Node.prototype.insertBefore/removeChild as a practical solution: https://github.com/facebook/react/issues/11538#issuecomment-417504600 It’s going to make those websites a bit slower but to many users this would be preferable to complete breakage. I hope we can stop recommending this though.

@yevheniitsuryk’s proposal works well for me (and is universal), we’d only need to modify it so it doesn’t wrap all of the text components, only the ones that have multiple children

Both solutions are technically workarounds, but we could implement one until the bug is fixed in Chromium itself

[jatinsonijs]

We can fix this by add class=“notranslate” in body tag inside web/index.html