[HOLD for payment 2024-11-29] [HOLD RN Upgrade] Android - Invoice - In invoice details page, reopening amount field shows cursor at beginning

[lanitochka17]

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.0.43-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Launch app
2. Log in with new expensifail account
3. Tap fab -- new workspace - more features - enable invoice
4. Navigate to LHN
5. Tap fab - send invoice
6. Enter an amount and tap next
7. Select a user
8. Tap next
9. Enter company name and address
10. Tap send invoice
11. Open invoice - amount
12. Reopen the amount field

Expected Result:

In invoice details page, reopening amount field must not show cursor at beginning

Actual Result:

In invoice details page, reopening amount field shows cursor at beginning

Workaround:

Unknown

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

Add any screenshot/video evidence

Bug6621403_1727807381706.Screenrecorder-2024-10-01-23-50-53-99_compress_1.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @sakluger

[melvin-bot]

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

[lanitochka17]

@sakluger FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[melvin-bot]

Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue.

[melvin-bot]

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

[nkdengineer]

Proposal

Please re-state the problem that we are trying to solve in this issue.

In invoice details page, reopening amount field shows cursor at beginning

What is the root cause of that problem?

The weird bug happens by the old HOC withOnyx in IOURequestStepAmount. That causes the currency to flicker from USD to the current currency

Screen.Recording.2024-10-03.at.15.10.49.mov

App/src/pages/iou/request/step/IOURequestStepAmount.tsx

Line 334 in efa3274

const IOURequestStepAmountWithOnyx = withOnyx<IOURequestStepAmountProps, IOURequestStepAmountOnyxProps>({

What changes do you think we should make in order to solve the problem?

Remove withOnyx in IOURequestStepAmount and use useOnyx. The test branch here

App/src/pages/iou/request/step/IOURequestStepAmount.tsx

Line 334 in efa3274

const IOURequestStepAmountWithOnyx = withOnyx<IOURequestStepAmountProps, IOURequestStepAmountOnyxProps>({

What alternative solutions did you explore? (Optional)

Result

Screen.Recording.2024-10-03.at.15.07.32.mov

[situchan]

@nkdengineer thanks for the proposal. The root cause is not clear. Please explain why this bug happens only on android.
I tested your branch and bug is still reproducible.

[nkdengineer]

@situchan Can you share the video that you tested in my test branch.

[nkdengineer]

The root cause is not clear. Please explain why this bug happens only on android.

@situchan That is because the withOnyx is outdated and on Android, there are more delays on the other platform when we merge the Onyx data then which can affect the weird lifecycle on Android.

We can see the log here in IOURequestStepAmount, this component is mounted and unmounted two times when we open this page

And here is the result when we use useOnyx

[QichenZhu]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Sometimes the caret in the currency amount input is initially at the beginning instead of the end.

What is the root cause of that problem?

The native component ReactEditText is not initially selectable. It only becomes selectable after it is attached to window.

https://github.com/facebook/react-native/blob/699f73a6b0734fe716b01d263e9579bca38c4652/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java#L1053C3-L1060

public void onAttachedToWindow() {

  super.setTextIsSelectable(true);

TextInput component sets the selection in the code below.

https://github.com/facebook/react-native/blob/699f73a6b0734fe716b01d263e9579bca38c4652/packages/react-native/Libraries/Components/TextInput/TextInput.js#L1104-L1132

useLayoutEffect(() => {

  viewCommands.setTextAndSelection(

The execution order of making it selectable and setting the selection is random. If making it selectable runs after setting the selection, the selection resets to the beginning.

To validate this, we can print logs before and after setTextIsSelectable().

FLog.w(TAG, "Before: selectable = " + isTextSelectable() + " selectionStart = " + getSelectionStart() + " selectionEnd = " + getSelectionEnd());
super.setTextIsSelectable(true);
FLog.w(TAG, "After: selectable = " + isTextSelectable() + " selectionStart = " + getSelectionStart() + " selectionEnd = " + getSelectionEnd());

We’ll notice when this bug occurs, the selection is at the right (Before: selectable = false selectionStart = 4 selectionEnd = 4) then resets to the left (After: selectable = true selectionStart = 0 selectionEnd = 0).

This is not always reproducible and happened in my tests only about 1 out of 10 times.

What changes do you think we should make in order to solve the problem?

We could add a patch to node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java to save the selection before calling setTextIsSelectable() and restore it afterward.

int prevSelectionStart = getSelectionStart();
int prevSelectionEnd = getSelectionEnd();
super.setTextIsSelectable(true);
setSelection(prevSelectionStart, prevSelectionEnd);

What alternative solutions did you explore? (Optional)

N/A