[Payment 2025-10-20] [$250] WEB - Book Travel - RHP does not auto scroll when an error message appears off-screen

[nlemma]

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: v9.2.13-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://test-management.browserstack.com/projects/2219752/folder/13177079/test-cases/41237922
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Device used: Windows 11 / Chrome
App Component: Other

Action Performed:

Precondition:

• Sign in to a Expensifail account in OD
• Create one or 2 group workspaces if there is no existing workspaces
• Set the Individual workspace as default

1. Login to ND
2. Click the FAB > Book Travel
3. Click the Book travel

Expected Result:

RHP should auto scroll when an error message appears off-screen

Actual Result:

RHP does not auto scroll when an error message appears off-screen
Note:

• Only reproducible on Web

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6943770_1757780744706.25W37_-_WEB_-_Book_Travel_-_RHP_does_not_auto_scroll_when_an_error_message_appears_off-screen.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021968701196072938668
• Upwork Job ID: 1968701196072938668
• Last Price Increase: 2025-09-18
• Automatic offers:
• huult | Contributor | 109030520

Issue Owner

Current Issue Owner: @NagaraniKaleeswaran

[melvin-bot]

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

[lorretheboy]

🚨 Edited by proposal-police: This proposal was edited at 2025-09-19 04:02:46 UTC.

Proposal

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

RHP does not auto scroll when an error message appears off-screen

What is the root cause of that problem?

The scrolling issue occurs specifically on Windows Chrome due to browser-specific rendering and timing differences.

The current code uses InteractionManager.runAfterInteractions() which waits for interactions to complete, but this doesn't guarantee that the error message DOM element has been fully rendered and measured by the browser's layout engine. Thus, scrollToEnd is executed before the error message has been measured.

App/src/pages/Travel/ManageTrips.tsx

Line 43 in ec8478b

scrollViewRef.current?.scrollToEnd({animated: true});

This behavior happens vary across situation/systems, here is one place that only occurs on IOS

App/src/components/LHNOptionsList/LHNOptionsList.tsx

Lines 355 to 361 in 74e6205

	// We need to use requestAnimationFrame to make sure it will scroll properly on iOS.
	requestAnimationFrame(() => {
	if (!(offset && flashListRef.current)) {
	return;
	}
	flashListRef.current.scrollToOffset({offset});
	});

Besides, we have seen issues related to the browser-specific scrolling behavior before, for example

App/src/components/FlatList/index.tsx

Lines 78 to 82 in 8777bd1

	// Stop momentum scrolling on mobile Safari otherwise the scroll position update
	// will not work.
	if (IS_MOBILE_SAFARI && interrupt) {
	node.style[overflowProp] = 'hidden';
	}

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

We will eliminate the current useEffect / scrollToBottom approach by leverages ScrollView’s onContentSizeChange

onContentSizeChange={() => {
      if (!shouldScrollToBottom) {
            return;
      }
      requestAnimationFrame(() => {
            scrollViewRef.current?.scrollToEnd({animated: true});
            });
}}

App/src/pages/Travel/ManageTrips.tsx

Line 58 in ec8478b

ref={scrollViewRef}

App/src/pages/Travel/ManageTrips.tsx

Line 51 in ec8478b

scrollToBottom();

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

We can use useLayoutEffect or setTimeout with fixed delay, or even double requestAnimationFrame

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.

[strepanier03]

This is windows, so I can't test. Going to send forward.

[melvin-bot]

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

[melvin-bot]

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

[NagaraniKaleeswaran]

@MelvinBot
Proposal

Problem: On Web, when an error message appears in the RHP (Right-Hand Panel) but is off-screen, the panel does not auto-scroll, so the user may not notice the error.

Root cause: The error message is being rendered but there’s no trigger to scroll the RHP into view when new validation errors appear.

Fix approach:

• Add a small utility to detect when a new error message is inserted into the DOM.
• On detection, call scrollIntoView({ behavior: "smooth", block: "nearest" }) for the error element.
• Scope this only to RHP forms (e.g. Book Travel) to avoid unintended global scrolling.

Validation:

• Reproduce the bug on staging by triggering form validation errors that are off-screen.
• Confirm RHP auto-scrolls to bring the error into view.
• Test on Chrome (Windows + Mac), Safari, and cross-browser to ensure consistent behavior.
• Regression check: ensure no extra scrolling happens for already-visible errors.

This ensures errors are always visible without breaking the user’s scroll position unnecessarily.