[HOLD for payment 2024-10-25] [HOLD for payment 2024-10-24] [$250] Android - Room -On entering multiline text with header markdown, 2nd line is not visible

[IuliiaHerets]

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.26
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4904629
Issue reported by: Applause Internal Team

Action Performed:

1. Launch app
2. Tap on a room chat
3. Tap header -- description
4. Enter a multiline text with header markdown

Expected Result:

On entering multiline text with header markdown, 2nd line must be visible.

Actual Result:

On entering multiline text with header markdown, 2nd line is not visible.

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6586126_1724906639755.Screenrecorder-2024-08-29-10-08-19-950_compress_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0166150593d62a36c2
• Upwork Job ID: 1829289632232865933
• Last Price Increase: 2024-09-19
• Automatic offers:
• alitoshmatov | Reviewer | 104139938
• tsa321 | Contributor | 104139940

Issue Owner

Current Issue Owner: @trjExpensify

[melvin-bot]

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

[IuliiaHerets]

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

[trjExpensify]

Reproducible:

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0166150593d62a36c2

[melvin-bot]

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

[jp928]

Proposal

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

The room description on Android is cut off when typein multiple lines.

What is the root cause of that problem?

App/src/styles/utils/index.ts

Line 1242 in 9e82ed8

height: maxHeight - styles.textInputMultilineContainer.paddingTop - styles.textInputContainer.borderBottomWidth,

function getAutoGrowHeightInputStyle doesn't workout a correct height. Consider to use maxHeight: '100%' instead, because we have clamp height on the container element.

App/src/styles/index.ts

Line 1158 in 9e82ed8

autoGrowHeightInputContainer: (textInputHeight: number, minHeight: number, maxHeight: number) =>

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

function getAutoGrowHeightInputStyle doesn't workout a correct height. Consider to use maxHeight: '100%' instead, because we have clamp height on the container element.

What alternative solutions did you explore? (Optional)

NA
Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[FitseTLT]

Edited by proposal-police: This proposal was edited at 2023-10-01T00:00:00Z.

Proposal

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

Room -On entering multiline text with header markdown, 2nd line is not visible

What is the root cause of that problem?

To fix scroll bar flickering issue on line breaks we are the text input height here

App/src/components/TextInput/BaseTextInput/index.tsx

Lines 386 to 389 in e66b123

	// Stop scrollbar flashing when breaking lines with autoGrowHeight enabled.
	...(autoGrowHeight
	? [StyleUtils.getAutoGrowHeightInputStyle(textInputHeight, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0), styles.verticalAlignTop]
	: []),

So the input has a fixed height so to allow autoGrow of height for multiline we are setting the height of the container to textInputHeight here

App/src/components/TextInput/BaseTextInput/index.tsx

Line 300 in e66b123

autoGrowHeight && styles.autoGrowHeightInputContainer(textInputHeight, variables.componentSizeLarge, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0),

this textInputHeight is determined by the layout of an invisible Text here

App/src/components/TextInput/BaseTextInput/index.tsx

Line 512 in e66b123

setTextInputHeight(e.nativeEvent.layout.height);

But in our case the InputComponent is RNMarkdownTextInput which styles the text value based on the markdown and in this case when the user inputs header markdown it is bold and takes more space/width so jumps to the next line with fewer characters than where the normal invisible Text component discussed above which we use to calculate the textInputHeight.

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

The scroll-bar flickering problem is only for normal RNTextInput and doesn't occur for RNMarkdownTextInput so we need only to apply manual height for !isMarkdownEnabled case
So change

App/src/styles/utils/index.ts

Lines 1229 to 1242 in e66b123

	getAutoGrowHeightInputStyle: (textInputHeight: number, maxHeight: number): ViewStyle => {
	if (textInputHeight > maxHeight) {
	return {
	...styles.pr0,
	...styles.overflowAuto,
	};
	}
	return {
	...styles.pr0,
	...styles.overflowHidden,
	// maxHeight is not of the input only but the of the whole input container
	// which also includes the top padding and bottom border
	height: maxHeight - styles.textInputMultilineContainer.paddingTop - styles.textInputContainer.borderBottomWidth,

getAutoGrowHeightInputStyle: (textInputHeight: number, maxHeight: number, includeHeight = true): ViewStyle => {
        if (textInputHeight > maxHeight) {
            return {
                ...styles.pr0,
                ...styles.overflowAuto,
            };
        }

        return {
            ...styles.pr0,
            ...styles.overflowHidden,
            // maxHeight is not of the input only but the of the whole input container
            // which also includes the top padding and bottom border
            ...(includeHeight && {['height']: maxHeight - styles.textInputMultilineContainer.paddingTop - styles.textInputContainer.borderBottomWidth}),
        };

App/src/styles/index.ts

Lines 1158 to 1162 in e66b123

	autoGrowHeightInputContainer: (textInputHeight: number, minHeight: number, maxHeight: number) =>
	({
	height: lodashClamp(textInputHeight, minHeight, maxHeight),
	minHeight,
	} satisfies ViewStyle),

autoGrowHeightInputContainer: (textInputHeight: number, minHeight: number, maxHeight: number, includeHeight = true) =>
            ({
                ...(includeHeight && {height: lodashClamp(textInputHeight, minHeight, maxHeight)}),
                ...(!includeHeight && {maxHeight}),
                minHeight,
            } satisfies ViewStyle),

App/src/components/TextInput/BaseTextInput/index.tsx

Line 300 in e66b123

autoGrowHeight && styles.autoGrowHeightInputContainer(textInputHeight, variables.componentSizeLarge, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0),

autoGrowHeight &&
                            styles.autoGrowHeightInputContainer(
                                textInputHeight,
                                variables.componentSizeLarge,
                                typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0,
                                !isMarkdownEnabled,
                            ),

App/src/components/TextInput/BaseTextInput/index.tsx

Line 388 in e66b123

? [StyleUtils.getAutoGrowHeightInputStyle(textInputHeight, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0), styles.verticalAlignTop]

 ? [
                                              StyleUtils.getAutoGrowHeightInputStyle(textInputHeight, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0, !isMarkdownEnabled),
                                              styles.verticalAlignTop,
                                          ]

and apply same for native files too
Here is a test branch

What alternative solutions did you explore? (Optional)