[Due for payment 2025-03-10] [$250] Search Page auto scroll to the end

[m-natarajan]

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.66-8
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
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
Expensify/Expensify Issue URL:
Issue reported by: @DylanDylann
Slack conversation (hyperlinked to channel name): ts_external_expensify_bugs

Action Performed:

1. Focus on main composer
2. Click on search icon

Expected Result:

Search Page shouldn't be scrolled to the end, Search field displayed

Actual Result:

Search field not displayed and Search Page auto scroll to the end

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Screen.Recording.2024-11-26.at.10.19.08.mov

Search.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021861669551935374233
• Upwork Job ID: 1861669551935374233
• Last Price Increase: 2024-11-27
• Automatic offers:
• DylanDylann | Reviewer | 105833357

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @VictoriaExpensify

[melvin-bot]

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

[m-natarajan]

@DylanDylann discovered this bug while reviewing #51172

[abzokhattab]

Edited by proposal-police: This proposal was edited at 2024-12-01 09:55:05 UTC.

Proposal

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

The search page automatically scrolls to the end.

What is the root cause of that problem?

The core issue stems from the search modal opening before the keyboard has fully closed, leaving the viewport in a scrolled state.

When pressing the search button, the openSearchRouter is executed immediately without waiting for the blur effect on the composer to complete.

App/src/components/Search/SearchRouter/SearchButton.tsx

Lines 34 to 39 in 5f27a44

	Performance.markStart(CONST.TIMING.OPEN_SEARCH);
	openSearchRouter();
	})}
	>
	<Icon

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

We need to embed the openSearchRouter similar to how it is implemented in other places:

onPress={Session.checkIfActionIsAllowed(() => {
    InteractionManager.runAfterInteractions(() => {
        Timing.start(CONST.TIMING.OPEN_SEARCH);
        Performance.markStart(CONST.TIMING.OPEN_SEARCH);
        openSearchRouter();
    });
})}

There is no need to blur as proposed in the first solution since the composer already blurs. This bug is reproducible only on iOS web, while other platforms work fine. Therefore, the root cause analysis (RCA) is not entirely correct—we just need to wait until all side executions are completed.

What alternative solutions did you explore? (Optional)

We could also move the InteractionManager.runAfterInteractions to the openSearchRouter implementation itself, ensuring this bug is avoided in other cases as well:

App/src/components/Search/SearchRouter/SearchRouterContext.tsx

Lines 21 to 30 in 4b81669

	const openSearchRouter = () => {
	Modal.close(
	() => {
	setIsSearchRouterDisplayed(true);
	searchRouterDisplayedRef.current = true;
	},
	false,
	true,
	);
	};

[DylanDylann]

I have more context with focus input while working on #51172. Could I take over this issue as C+ if it is external

[bernhardoj]

Proposal

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

Search page is at the bottom when we open it while the report screen composer keyboard is shown.

What is the root cause of that problem?

When we open the keyboard in the report screen, the viewport is scrolled. You can log the window.visualViewport.offsetTop to see how much it's scrolled. When we open the search modal, the keyboard doesn't close, so the visual viewport scroll is still the same, thus the scroll modal is at the bottom.

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

We have 3 options.

First, we can apply a padding top based on the viewport offset value.

App/src/components/Search/SearchRouter/SearchRouterModal.tsx

Lines 12 to 23 in c4ff235

	function SearchRouterModal() {
	const {shouldUseNarrowLayout} = useResponsiveLayout();
	const {isSearchRouterDisplayed, closeSearchRouter} = useSearchRouterContext();
	// On mWeb Safari, the input caret stuck for a moment while the modal is animating. So, we hide the caret until the animation is done.
	const [shouldHideInputCaret, setShouldHideInputCaret] = useState(isMobileSafari);
	const modalType = shouldUseNarrowLayout ? CONST.MODAL.MODAL_TYPE.CENTERED_SWIPABLE_TO_RIGHT : CONST.MODAL.MODAL_TYPE.POPOVER;
	return (
	<Modal
	type={modalType}

const viewportOffsetTop = useViewportOffsetTop();

<Modal
    type={modalType}
    innerContainerStyle={{paddingTop: viewportOffsetTop}}

search.mp4

Second, we can scroll the viewport back to the top when the search modal shows.

onModalShow={() => {
    window.scroll({top: 0})
    setShouldHideInputCaret(false)
}}

sesarch.mp4

Third, delay the search input focus. (not preferable)

[VictoriaExpensify]

Sure, all yours @DylanDylann

[melvin-bot]

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