[HOLD App#51475] [$250] Request money component is jumpy when entering the digits

[kavimuru]

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

---

Action Performed:

1. Open a DM
2. Tap + in the compose box > Request money
3. Enter the amount

Expected Result:

No jumpy behavior when entering the digits

Actual Result:

Request money component is jumpy

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 / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.22
Reproducible in staging?: needs reproduction
Reproducible in production?: needs reproduction
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
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2023-06-01.at.16.05.20.mov

Expensify/Expensify Issue URL:
Issue reported by: @mountiny
Slack conversation: https://expensify.slack.com/archives/C9YU7BX5M/p1685628667713269

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0115f73500419bbdad
• Upwork Job ID: 1665685007250124800
• Last Price Increase: 2024-08-21

Issue Owner

Current Issue Owner: @hannojg

[melvin-bot]

Triggered auto assignment to @arielgreen (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[hannojg]

Hey, I was bringing up that issue originally. It seems that not every device is able to reproduce the issue. However, I tested it with 5 different phones in our office, among it high end phones like the newest iPhones and the issue is reproducible on all of them 🤔 (so the issue is on android and iOS).
The thing is, its hard to see while using that there is a jumpiness, but I think you can definitely feel that its not smooth. That's why I did a screen recording and when you step through the recording frame by frame you will see states where the input is not adjusting its size fast enough (see attached video).

(In addition I'd like to work on that issue once QA can confirm its reproducible).

[hannojg]

Also on Web it's not jumping, but you can see, if you look very closely, that the number shows with one frame delay.

This is due to the fact that we first put the text inside a Text view, measure it, and then change the size of the input.

I think it makes sense to rework the autoGrow functionality, so it isn't delayed by a frame (and on mobile doesn't jump).

trim.7B871403-74B5-417A-834A-C5C089118E2D.MOV

[mountiny]

@hannojg Let us know what the next steps on this one would be

[melvin-bot]

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

[melvin-bot]

Current assignee @arielgreen is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[melvin-bot]

Current assignee @mountiny is eligible for the External assigner, not assigning anyone new.

[mountiny]

Not overdue

[hannojg]

We could put this on hold for #16696 until we settled on a decision there.

However, in the meantime, I am already experimenting with some solutions for a better implementation of the autoGrow behaviour. Will share more information once I find a good working solution 😊

[melvin-bot]

Upwork job price has been updated to $250

[mountiny]

This is not on hold anymore @hannojg, will you still work on this one?

[hannojg]

Oh absolutely, thanks for the ping! @mountiny

[hannojg]

Okay, i started to look into this again, the solution for mobile is to remove the manual text input measurement growth. A text input can automatically grow based on the input length on mobile.

I was starting to implement a PR here:

• [WIP] Fix/auto grow textinput margelo/expensify-app-fork#10

However, the code has changed a lot since then so I will open a new PR 😊

[hannojg]

I created a PR that removed the manual autoGrow calculation and let the platform components handle the width growth:

• [HOLD on #48160] fix: autoGrow prop on mobile is handled by native platform  #50238

The effect is already less visible, but its not entirely gone.

There seems to be an underlying issue in react native's iOS text input implementation causing the problem. In a clean iOS app using UIKit/UITextField everything works fine, but in a clean react native app just using TextInput you can see the numbers getting cut off:

Screen.Recording.2024-10-04.at.14.43.43.mov

Will open an upstream issue ticket + PR!

[hannojg]

Theoretically we could already move on with the PR and add the react native fix after. or we wait first for the react native fix and add that to the PR. Not sure

[hannojg]

Upstream issue:

• iOS: Singleline TextInput auto grow: text gets cut while typing facebook/react-native#46838

[mountiny]

Thanks @hannojg Do you think you could try to fix this upstream? then we can apply the fix in a patch and removed once its in a new RN version

[hannojg]

Yes, working on an upstream fix right now 😊 👍

[hannojg]

Update: i think i found a viable fix that makes sense and i don't see any other way to fix this:

• iOS: Singleline TextInput auto grow: text gets cut while typing facebook/react-native#46838 (comment)

However, i first want to check with meta if they are cool with this change / if they have any other solution in mind.

Currently waiting to receive an invite to the discord channel with meta (can you help with that @mountiny ?) as this seems to be the preferred procedure when trying to make changes in react native for expensify.

[mountiny]

I think @AndrewGable or maybe @tomekzaw might be able to ask someone? Who are good people to reach out about the discord invite?

[AndrewGable]

I can invite internal Expensify team members, but might be best to ask @mrousavy or someone from your team for an invite @hannojg! (I think @chrispader was just added last month)

[hannojg]

Hey, i just joined the React Contributors react discord - are you able to add me into the according channels?
Discord username is hannojg

[AndrewGable]

I don't think I can add you, but #contributors-hub might be the best channel to discuss?

[mrousavy]

Already invited you hanno.

[hannojg]

Update: My solution was judged as "makes sense" from two core contributors. It was forwarded to some other people for a final pass, so i am confident that the solution will be used moving forward.
However, i just noticed that the fix doesn't seem to work in the use-case in expensify. Its very likely because the input in expensify is a controlled one.
I am now investigating how to bring the fix to the controlled text input (the fix itself should be similar/the same)

[hannojg]

Okay, i finally have a PR up in react-native:

• fix: don't update text input text directly in setTextAndSelection facebook/react-native#46973

Will update our PR shortly!

[hannojg]

Okay, the PR is updated. However, i noticed that my patch doesn't work 100% when bridgeless mode is turned off. As we are working on turning that on (and looks like we are close), I'd like to take this on hold for:

• [NoQA] feat: enable bridgeless #48160

[hannojg]

Update: bridgeless support was merged, but was deactivated on android again. Lets put this on hold for this PR where we aim to reactivate bridgeless mode for android:

• [WIP] Upgrade to React Native 0.76 #51475

[mountiny]

updated the hold