[$250] Report field - Multiline input for name field in report field does not scroll

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

---

Version Number: 9.2.72-0
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://test-management.browserstack.com/projects/2219752/test-runs/TR-2264/folder/13176707/41236871/1054916242?sort=%2Bidentifier
Issue reported by: Applause - Internal Team

Action Performed:

1. Sign in to staging.new.expensify.com
2. Navigate to Workspace > Workspace settings > Report fields
3. In the "Name" field, enter a long report format eg. ({report:total} | {report:total:usd} | {report:total:EUR})
4. Remove the last couple of letters

Expected Result:

Either scroll is displayed to show all the input by scrolling down or user should view the far right when navigating right

Actual Result:

No scroll is displayed or user can not view inputs beyond the limit of the field

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug7020789_1764866612454.bandicam_2025-12-04_19-24-02-711.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021998540157022031909
• Upwork Job ID: 1998540157022031909
• Last Price Increase: 2025-12-09
• Automatic offers:
• huult | Reviewer | 109777268

Issue Owner

Current Issue Owner: @mohammadjafarinejad

[melvin-bot]

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

[nyomanjyotisa]

Proposal

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

Report field - Multiline input for name field in report field does not scroll

What is the root cause of that problem?

InputWrapper has autoGrowHeight and maxAutoGrowHeight which enable multiline input

App/src/pages/workspace/reports/ReportsDefaultTitle.tsx

Lines 118 to 137 in ae2850b

	<InputWrapper
	InputComponent={TextInput}
	role={CONST.ROLE.PRESENTATION}
	inputID={INPUT_IDS.DEFAULT_TITLE}
	defaultValue={customNameDefaultValue}
	label={translate('workspace.reports.customNameInputLabel')}
	aria-label={translate('workspace.reports.customNameInputLabel')}
	maxAutoGrowHeight={variables.textInputAutoGrowMaxHeight}
	value={reportTitle}
	spellCheck={false}
	autoFocus
	onChangeText={setReportTitle}
	autoGrowHeight
	ref={(el: BaseTextInputRef | null): void => {
	if (!isInputInitializedRef.current) {
	updateMultilineInputRange(el);
	}
	isInputInitializedRef.current = true;
	}}
	/>

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

Remove autoGrowHeight, maxAutoGrowHeight, and the updateMultilineInputRange ref callback to make the input single-line

App/src/pages/workspace/reports/ReportsDefaultTitle.tsx

Lines 118 to 137 in ae2850b

	<InputWrapper
	InputComponent={TextInput}
	role={CONST.ROLE.PRESENTATION}
	inputID={INPUT_IDS.DEFAULT_TITLE}
	defaultValue={customNameDefaultValue}
	label={translate('workspace.reports.customNameInputLabel')}
	aria-label={translate('workspace.reports.customNameInputLabel')}
	maxAutoGrowHeight={variables.textInputAutoGrowMaxHeight}
	value={reportTitle}
	spellCheck={false}
	autoFocus
	onChangeText={setReportTitle}
	autoGrowHeight
	ref={(el: BaseTextInputRef | null): void => {
	if (!isInputInitializedRef.current) {
	updateMultilineInputRange(el);
	}
	isInputInitializedRef.current = true;
	}}
	/>

What alternative solutions did you explore? (Optional)

We can pass type="markdown" prop to the InputWrapper, but I think it's expected to remove the type="markdown"

[nkdengineer]

🚨 Edited by proposal-police: This proposal was edited at 2025-12-10 05:54:27 UTC.

Proposal

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

No scroll is displayed or user can not view inputs beyond the limit of the field

What is the root cause of that problem?

For the auto-grow input which isn't markdown input, the height is calculated manually here. But the displayed input has the padding horizontal 8px here while the hidden text is not, then the height is not synced.

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

Lines 62 to 69 in 51e330f

	<Text
	style={[
	inputStyle,
	autoGrowHeight && styles.autoGrowHeightHiddenInput(width ?? 0, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : undefined),
	styles.hiddenElementOutsideOfWindow,
	styles.visibilityHidden,
	]}
	onLayout={(e) => {

Here is the result when we disable the hidden style to display the hidden text

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

We should add padding left and right 8px here with pl2 and pr2 style since the inputStyle can contain the padding style which can't be overridden by ph2 style

styles.pl2,
styles.pr2,

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

Lines 62 to 69 in 51e330f

	<Text
	style={[
	inputStyle,
	autoGrowHeight && styles.autoGrowHeightHiddenInput(width ?? 0, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : undefined),
	styles.hiddenElementOutsideOfWindow,
	styles.visibilityHidden,
	]}
	onLayout={(e) => {

What alternative solutions did you explore? (Optional)

Collect the padding/margin style of newTextInputContainerStyles and merge it with inputStyle here

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

Line 528 in 51e330f

inputStyle={inputStyle}

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

Lines 62 to 69 in 51e330f

	<Text
	style={[
	inputStyle,
	autoGrowHeight && styles.autoGrowHeightHiddenInput(width ?? 0, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : undefined),
	styles.hiddenElementOutsideOfWindow,
	styles.visibilityHidden,
	]}
	onLayout={(e) => {

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.

[melvin-bot]

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

[melvin-bot]

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