[$1000] Cursor is barely visible on the next line after pressing 'Enter' in task description while creating it

[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. Log into an account that can assign tasks (tasks are still in beta, so this'll need to be done in DEV).
2. Open a report (create one if it doesn't exist), and click the '+' sign in the composer.
3. Choose the 'Assign task' option.
4. Add some text in the 'Description' field and then press 'Enter'.

Expected Result:

When you press Enter to create a new line in the task description field, the input area should automatically expand to show the full cursor on the next line.

Actual Result:

When you press Enter to create a new line, the input area does not auto adjust to the next line until the user starts typing characters on the new line.

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.31-3
Reproducible in staging?: y
Reproducible in production?: y
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

expensify-task-description-newline-bug.mov

Expensify/Expensify Issue URL:
Issue reported by: @Victor-Nyagudi
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1687008611679269

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f6185cdf31429363
• Upwork Job ID: 1674513944297259008
• Last Price Increase: 2023-06-29

[melvin-bot]

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

[Nathan-Mulugeta]

This is a dupe of this issue

[melvin-bot]

@sakluger Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[sakluger]

This issue is stemming from this issue - I left a comment over there.

[sakluger]

Okay this is a new issue, adding external label.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[chiragxarora]

Proposal

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

Description - Cursor half visible when hitting Enter and going to next line of Task Description

What is the root cause of that problem?

Root cause is the custom autoGrowHeight styles which we are using by passing the autoGrowHeight prop to dynamically update the height of <TextInput/>

App/src/pages/tasks/TaskDescriptionPage.js

Lines 77 to 91 in 82558a1

	<TextInput
	inputID="description"
	name="description"
	label={props.translate('newTaskPage.descriptionOptional')}
	defaultValue={(props.task.report && props.task.report.description) || ''}
	ref={(el) => (inputRef.current = el)}
	autoGrowHeight
	submitOnEnter
	containerStyles={[styles.autoGrowHeightMultilineInput]}
	textAlignVertical="top"
	selection={selection}
	onSelectionChange={(e) => {
	setSelection(e.nativeEvent.selection);
	}}
	/>

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

This is more of an hack but you could see that for first 3-4 lines it partially hides the cursor and post that, it behaves well.
We could either edit the autoGrowHeightMultilineInput style aur create another similar one where we shall increase the minHeight slightly. Currently its 52px and we could increase it to 60px (reason is to provide space for 2nd line beforehand).
And we need a state variable for height to update the styles as the content grows. We can get current height of the input box by using native prop onContentSizeChange.

const [height, setHeight] = useState(60);
...................
<TextInput
 containerStyles={[styles.autoGrowHeightMultilineInputNew(height)]}
 onContentSizeChange={(e) => setHeight(e.nativeEvent.contentSize.height)}
>
</TextInput>

autoGrowHeightMultilineInputNew: (height) => ({
        height: height,
        minHeight: 60
    }),

Results

What alternative solutions did you explore? (Optional)

None

[chiragxarora]

Dupe of #21271

[Nathan-Mulugeta]

Isn't that in task description page @chiragxarora

[chiragxarora]

This is also about task description and this bug is present on task description, new task description and welcome text and maybe some other multiline input. RCA is same

[mollfpr]

@chiragxarora If this happens on other pages and the RCA is the same, should we have a global solution?

[sakluger]

I agree that this is the same root cause and that we should have a global solution. I'm going to close this issue in favor of #21271, and recommend over there that we create one global solution.