[HOLD for payment 2024-07-24] [$250] [Critical] [UX Reliability] Input in the pushed in page moves around causing wrong message typed

[mountiny]

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

---

Version Number:
Reproducible in staging?:
Reproducible in production?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @mountiny
Slack conversation: https://expensify.slack.com/archives/C05LX9D6E07/p1718793199252419

Action Performed:

Break down in numbered steps

There is many flows where this can be experienced. Wherever we push a page with input to autofocus. In this video I have:

1. Go to workspace chat
2. Submit expense
3. Scan a receipt
4. Click on Description row
5. Start typing quickly

Expected Result:

Describe what you think should've happened

The message you type is correctly applied

Actual Result:

Describe what actually happened

It seems like after first of second character the cursor jumped to the front of the input

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

RPReplay_Final1718703554.mp4

he logs and traces are in slack convo
Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~013581c71c8dab48d3
• Upwork Job ID: 1803380011113187610
• Last Price Increase: 2024-07-03

Issue Owner

Current Issue Owner: @muttmuure

[melvin-bot]

Triggered auto assignment to @muttmuure (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.

[hannojg]

👋

[melvin-bot]

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

[melvin-bot]

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

[hannojg]

No new update yet here specifically. The problem basically being similar to the one in:

• [HOLD for payment 2024-08-09] [HOLD for payment 2024-08-01] [$250] CRITICAL: Native - Message stays in the Composer after being sent #37896

so we want to tackle that issue first

[hannojg]

Still prioritising the aforementioned issue - do we want to put this one on hold for the other issue?

[jacobkim9881]

@hannojg 😃 I found a cause for the issue but it seems the issue's root cause is from other repository. I would like to report.

[hannojg]

Sure, feel free to share what you've found

[jacobkim9881]

App/src/pages/tasks/TaskDescriptionPage.tsx

Line 125 in c0d3e79

isMarkdownEnabled

I found the issue noticeably decreased after off the props. And the props activate a component from other repository, which somebody can handle.

[jacobkim9881]

Which decides a comp between 2:

App/src/components/TextInput/BaseTextInput/index.native.tsx

Line 71 in 7eeede6

const InputComponent = isMarkdownEnabled ? RNMarkdownTextInput : RNTextInput;

And RNMarkdownTextInput comp is from @expensify/react-native-live-markdown that is from other. Shame I couldn't PR!

[hannojg]

Okay, so it seems that you pined the issue down to react-native-live-markdown. Great, thanks for the insight!

Two things I want to let you know about:

• At Expensify we want to fix the problems "upstream" and actively contribute to the open source space. That means we don't stop when we found an issue in an open source library, letting it fix someone else. We contribute to the project, by figuring out what the problem is. So the next step here is to look into the code of react-native-live-markdown and fix the bug! 😊
• react-native-live-markdown is a library owned and developed by expensify (in partnership with SWM). So you can think of react-native-live-markdown being another folder in the expensify app.

What I am trying to say is that we need to continue to investigate whats exactly causing the issue when using react-native-live-markdown. (This is something I have on my todo list now, as the issue is assigned to me).

[hannojg]

What do you mean by

Shame I couldn't PR!

there is nothing stopping from you from checking out the code of react-native-live-markdown 😊

[jacobkim9881]

Okay, so it seems that you pined the issue down to react-native-live-markdown

Yes. I assume we can find the root cause from there 😃 So we can continue to found the issue upstream! So we still have more chances to fix. That's nice!

react-native-live-markdown is a library owned and developed by expensify (in partnership with SWM). So you can think of react-native-live-markdown being another folder in the expensify app.

So it would be easy to get helps since it's partner shipped with SWM. That's cool! I found it in node_modules.

[jacobkim9881]

there is nothing stopping from you from checking out the code of react-native-live-markdown 😊

Would like to continue 😄

[jacobkim9881]

So I found performance better noticeably in the input tag without this comp:

https://github.com/Expensify/react-native-live-markdown/blob/d05065948bf36414705fe9148b25686adfab2181/src/MarkdownTextInput.tsx#L53-L55

which uses this:
https://github.com/Expensify/react-native-live-markdown/blob/d05065948bf36414705fe9148b25686adfab2181/src/MarkdownTextInputDecoratorViewNativeComponent.ts#L4

The only comp used is from react-native. I can continue though it's from another repo? 😄

[mountiny]

Hey @jacobkim9881! thanks for help on this one. I recommend you to first read through the contributing guidelines we have for the Expensify App repo https://github.com/Expensify/App/blob/main/contributingGuides/CONTRIBUTING.md. We have a format for new proposals which you should use if you want to submit a proposal.

If the issue is in the https://github.com/Expensify/react-native-live-markdown/blob/d05065948bf36414705fe9148b25686adfab2181/src/MarkdownTextInputDecoratorViewNativeComponent.ts#L4 you can also submit a proposal here with clearly identifying the rootcause and how you propose to fix it. If that will be correct, you can do the work and get paid for it through Upwork. Thanks!

[jacobkim9881]

Hey, @mountiny! Thank you for the guidance! Let me give proposals to issues in other time.

you can also submit a proposal here with clearly identifying the rootcause

I would like to submit proposals if I find the solution. Thanks for letting me know again!

[jacobkim9881]

@mountiny I have a question. If I contribute in anyway, is there a chance I can get paid? Though I couldn't get paid, am happy to be helped in anyway!

[hannojg]

Draft PR is here @mountiny

• chore: bump rn-live-markdown to 0.1.101 #44913

In this PR I bumped rn-live-markdown as SWM already merged the PR. Let me know if that works, because there is another PR for bumping rn-live-markdown first where a few bugs have been addressed (so that one needs to be merged first, I linked it in the PR)

[tomekzaw]

cc-ing @Skalakid and @BartoszGrajdek here as one of the recently merged PRs to live-markdown turns out to cause a regression on web and they should have the context

[hannojg]

Note: the fix was implemented in rn-live-markdown and we are waiting for this PR to be merged to fix it:

• Bump react-native-live-markdown #44958

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.7-8 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Bump react-native-live-markdown #44958

If no regressions arise, payment will be issued on 2024-07-24. 🎊

For reference, here are some details about the assignees on this issue:

• @hannojg does not require payment (Contractor)
• @mkhutornyi requires payment (Needs manual offer from BZ)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@mkhutornyi] The PR that introduced the bug has been identified. Link to the PR:
• [@mkhutornyi] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@mkhutornyi] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@mkhutornyi] Determine if we should create a regression test for this bug.
• [@mkhutornyi] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@muttmuure] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[melvin-bot]

Payment Summary

Upwork Job

• Contributor: @hannojg is from an agency-contributor and not due payment
• ROLE: @mkhutornyi paid $(AMOUNT) via Upwork (LINK)

BugZero Checklist (@muttmuure)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1803380011113187610/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[mountiny]

@mkhutornyi can you please summarize the payment here? which PRs did you review?

[melvin-bot]

@hannojg, @mountiny, @muttmuure, @mkhutornyi Whoops! This issue is 2 days overdue. Let's get this updated quick!

[mkhutornyi]

I didn't review any PR linked to this issue. I think we can just close this.