[$250] Android - Report Fields - Cursor position jumps to the beginning of the name field

[lanitochka17]

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

Issue found when executing PR https://github.com/Expensify/App/pull/44275

Action Performed:

1. Open new expensify app
2. Create a workspace
3. Enable report fields feature
4. Open report fields setting
5. Tap on add field
6. Tap on Name and add something and save it
7. Tap on Name again

Expected Result:

The cursor positions itself at the end of the text

Actual Result:

The cursor jumps to the beginning of the saved text

Workaround:

Unknown

Platforms:

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

• [x] Android: Native
• [ ] Android: mWeb Chrome
• [ ] iOS: Native
• [ ] iOS: mWeb Safari
• [ ] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/Expensify/App/assets/78819774/03a437a3-e2e2-4a98-bfd9-d4b51ce08da8

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01ecace54576044ee5
• Upwork Job ID: 1808958862801435309
• Last Price Increase: 2024-07-04
• Automatic offers:
• shubham1206agra | Reviewer | 102994077
• dominictb | Contributor | 103082291

Issue Owner

Current Issue Owner: @garrettmknight

[melvin-bot[bot]]

Triggered auto assignment to @marcochavezf (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions[bot]]

:wave: Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[lanitochka17]

@marcochavezf 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

[marcochavezf]

I don't consider it a deploy blocker, and can be fixed externally

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[mountiny]

I am managing this project so going to take over this issue to make sure it gets fixed. Thanks for helping!

[melvin-bot[bot]]

📣 @shubham1206agra 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job

[mountiny]

@rezkiy37 @waterim Can you please have a look

[abzokhattab]

Proposal

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

Report Fields - Cursor position jumps to the beginning of the name field when reopened

What is the root cause of that problem?

• The name field inside create report field uses the TextPicker as the InputWrapper for the user's input field
• The TextPicker component uses the TextSelectorModal component in order to render the text field
• The TextSelectorModal contains a prop isVisible that decides whether the input field page should be visible or not.
• in case the isVisible is false then true (page was reopened), the input field refocuses here in order to show the keyboard as mentioned in this PR .
• the inputRef.current.focus() doesn't preserve the cursor position, that's why it just places the cursor at the beginning

PS: This issue occurs in the create new tax page as well

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

we should set the cursor selection at the end of the string after focusing, we should modify the useFocusEffect to be as follows:

   useFocusEffect(
        useCallback(() => {
            focusTimeoutRef.current = setTimeout(() => {
                if (inputRef.current && isVisible) {
                    inputRef.current.focus();
                    if (currentValue) {
                        inputRef.current.setSelection(currentValue.length, currentValue.length);
                    }
                }
                return () => {
                    if (!focusTimeoutRef.current || !isVisible) {
                        return;
                    }
                    clearTimeout(focusTimeoutRef.current);
                };
            }, CONST.ANIMATED_TRANSITION);
        }, [isVisible]),

optionally, instead of always placing the cursor at the end when refocusing, we can save the cursor position in a ref and use it instead

POC

https://github.com/Expensify/App/assets/59809993/5a82f5fe-1185-4a22-86b5-0d5e14f2c436

[dominictb]

Proposal

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

The cursor jumps to the beginning of the saved text

What is the root cause of that problem?

We're putting the textInput in modal, and we control showing the input based on isVisible.

When the input is mounted, the selection is (0, 0), then users open reportField page, isVisible becomes true

-> we try to focus on the input with the initial selection is (0, 0)

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

The logic to focus the input in here is already implemented in useAutoFocusInput hook, so we can re-use this hook

1. Add isModalVisible and value params to useAutoFocusInput (default is undefined)
2. use isModalVisible in this places

    useFocusEffect(
        useCallback(() => {
if(!isModalVisible){
                return;
            }
...

}, [isModalVisible]),

3. Add logic to preserve the selection in

https://github.com/Expensify/App/blob/2fad56eb9b0a2c6962c5d65f3b87e0b12e6bf9d0/src/hooks/useAutoFocusInput.ts#L26

inputRef.current.setSelection(value.length, value.length);

4. Finally, use useAutoFocusInput hook along with isVisible and currentValue in TextSelectorModal

What alternative solutions did you explore? (Optional)

[rushatgabhane]

Looks like @rezkiy37 / @waterim will work on this?

[waterim]

Hello, I will help with this issue

[dominictb]

Hi @waterim @mountiny, I see this issue is external and I already have the proposal for this. But the label Help Wanted is removed. Is my proposal still in-review. thanks

[rezkiy37]

Hi, I’m Michael (Mykhailo) from Callstack and I would like to work on this issue.

[rezkiy37]

I've opened a PR (https://github.com/Expensify/App/pull/45074) for review 🙂

[dominictb]

Hi @mountiny @rezkiy37 Do you think we need to re-use the useAutoFocusInput? This bug will happens if we use the input in modal so we can

1. Prevent the duplicated code
2. Prevent the future bug

[rezkiy37]

Just to clarify: the app does not use useAutoFocusInput for this scenario with the new report field name. It uses TextSelectorModal under the hood and this component handles focusing.

[abzokhattab]

Hello team, I think my solution was employed in the PR. Am I eligible for an offer here?

cc @mountiny

[mountiny]

$50 to @abzokhattab as the issue was labeled as Help Wanted and we have used their solution

[melvin-bot[bot]]

📣 @dominictb 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

[garrettmknight]

@dominictb updated offer sent to you for $50

[abzokhattab]

@garrettmknight I believe there may be a mistake in the offer assignment, can you please recheck this comment Thank you for your consideration!

[melvin-bot[bot]]

📣 @abzokhattab 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

[garrettmknight]

Oops, @abzokhattab you're right. I'll drop the contract to pay $50 when the solution works on prod.

[rushatgabhane]

PR reviewed and merged

[garrettmknight]

@abzokhattab all paid out!

[garrettmknight]

Looks like this made it to prod on Monday. Just tested and it's fixed.

[garrettmknight]

Payment Summary:

• Reviewer: @rushatgabhane $250

@rezkiy37 @mountiny is there a regression test for this already?