[Pending Checklist] [$1000] Description - Cursor half visible when hitting Enter and going to next line of Task Description

[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!

---

Issue found when executing PR #20775

Action Performed:

1. Login to NewDot
2. Go to any chat
3. Click + and Assign Task
4. Enter first line in Description field
5. Press Enter on the keyboard

Expected Result:

Cursor should be well visible on the second line

Actual Result:

Cursor partially visible until any other character is type after Enter

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

Reproducible in staging?: Yes

Reproducible in production?: Yes

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

Bug6101939_video_03__8_.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~014922e794dd66dc4a
• Upwork Job ID: 1677228108574597120
• Last Price Increase: 2023-07-14

[melvin-bot]

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

[greg-schroeder]

There are a couple issues pointing to this:

#21280
#21205

I think it will just be fixed by #21205.

[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]

@greg-schroeder this should be opened again

[dummy-1111]

Please check this proposal. This will solve the all kind of issues related to auto-grow TextInput

#21905 (comment)

[fabOnReact]

Proposal

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

• TextInput has the wrong height after hitting enter on Safari/Macos/Chrome
• The cursor is cut

What is the root cause of that problem?

The root cause of the issue is the difference in behaviour of the Text Component on different platforms (web, iOS and Android).
The height of the TextInput is calculated with Text onLayout, which has a different behaviour when adding new line between react-native-web and react-native.

React Native Web uses white-space: pre-wrap to render new lines and spaces

react-native-web uses white-space: pre-wrap which adds a new line only when the \n is followed by a character (for ex. Line1\n has one line, Line1\nLine2 has two lines).

https://snack.expo.dev/@fabrizio.bertoglio/grounded-croissant

React Native uses native Layout APIs to calculate the View height and sets the height of the View onMeasure

react-native uses native APIs to calculated the layout from the ShadowNode (on Android using the Layout API). The \n adds a new line (for ex. Line1\n has two lines) on iOS and Android.

snack https://snack.expo.dev/@fabrizio.bertoglio/grounded-croissant

When the Text has some text in the new line:

• Android height 36
• Safari height 34

When the Text has an empty line:

• Android height 36
• Safari height 17

iOS

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

https://reactnative.dev/docs/tutorial#whats-going-on-here

JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like div or span, you use React components.

react-native-community/discussions-and-proposals#496

React Native currently includes many APIs that are modelled on Web APIs but do not conform to the standards of those Web APIs.

React Native is based on Web Standards. For this reason, iOS and Android should uniform to Web.
The native implementation needs to be updated to behave like Web, on Android requires changes to ReactTextShadowNode measure, FontMetricsUtil, ReactTextView onLayout, TextLayoutManager and TextLayoutManagerMapBuffer measureText to avoid adding a new line when \n is not followed by a character.
Similar changes are required on iOS.

What alternative solutions did you explore? (Optional)

Fixing the issue in react-native-web and adding a new line when using \n to uniform the API with iOS and Android.