IOS - Assign task - Text is flickering in case of editing saved description field

[kbecciv]

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

---

Issue found when executing PR #19377

Action Performed:

1. Assign a new task, fill title, multiline description and tap on the Next button
2. Try to edit multiline description field

Expected Result:

The user should be able to edit description fields without any issues

Actual Result:

Text is flickering in case of editing multi line description field

Workaround:

Unknown

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.28.3

Reproducible in staging?: yes

Reproducible in production?: new feature

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

Bug6094308_RPReplay_Final1686841212_2.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

[OSBotify]

👋 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.

[melvin-bot]

Triggered auto assignment to @thienlnam (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[dan1d]

I would like to work on this ticket but I cannot set up the development environment for iOS since I've got a mac M1 chip but the StackOverflow link on the Readme is only for people with @expensify.com email, which I don't own, how can I get access to that SO link since it is restricted?

[thienlnam]

@dan1d Please bring any setup related questions to #expensify-open-source in slack!

[thienlnam]

Not a blocker, only happens when you go beyond the multiple lines. This appears to be a regression of this though

#19135

[akinwale]

Looks like this is a side effect of using the state to set the TextInput selection prop. It's happening in the NewTaskDescriptionPage and TaskDescriptionPage components. This didn't seem to happen during my tests so I may have missed it somehow.

After taking a look, I can use the onEntryTransitionEnd event handler to set the selection range after inputRef.current.focus(), like so:

if (inputRef.value && inputRef.setSelectionRange) {
    const length = inputRef.value.length;
    inputRef.setSelectionRange(length, length);
}

This is the way it's being done for the welcomeMessage text input in WorkspaceInviteMessagePage. It places the text cursor at the end, however, the text input does not automatically scroll to the position until typing starts. I believe the underlying issues with the multiline TextInput control would have to be handled in a separate issue for this to work properly.

@sobitneupane What do you think of this approach?