[$250] Reports - While typing on search input, only a black line can be seen below it

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.1.3-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N
Issue reported by: Applause - Internal Team

Action Performed:

1. Open the Expensify app
2. Tap on "Reports"
3. Tap on "Search for something"
4. Start writing and check if any content or suggestions are added below input

Expected Result:

Recents chats and suggestions depending on the search, should be displayed below search input while typing

Actual Result:

Only a black line can be seen displayed below input, instead of recents chats or suggestions, while typing

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

Bug6749538_1740092976973.Black_Line.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021894113404752369707
• Upwork Job ID: 1894113404752369707
• Last Price Increase: 2025-02-24
• Automatic offers:
• ikevin127 | Reviewer | 106282300

Issue Owner

Current Issue Owner: @ikevin127

[melvin-bot]

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

[bernhardoj]

Proposal

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

The search result is cut off.

What is the root cause of that problem?

The list is wrapped with a View that has a flex 1 style.

App/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx

Lines 232 to 239 in 14c5b21

	if (displayNarrowHeader) {
	return (
	<View
	dataSet={{dragArea: false}}
	style={[styles.flex1]}
	>
	<View style={[styles.appBG, styles.flex1]}>
	<View style={[styles.flexRow, styles.mh5, styles.mb3, styles.alignItemsCenter, styles.justifyContentCenter, {height: variables.searchTopBarHeight}]}>

Flex depends on the parent available size, however, the parent component in this case doesn't define its size (no width, no flex).

App/src/pages/Search/SearchPageNarrow.tsx

Lines 140 to 144 in 14c5b21

	<View style={[styles.flex1]}>
	<Animated.View style={[topBarAnimatedStyle, !searchRouterListVisible && styles.narrowSearchRouterInactiveStyle, styles.flex1, styles.bgTransparent]}>
	<View style={[styles.narrowSearchHeaderStyle]}>
	<SearchPageHeader
	queryJSON={queryJSON}

So, it actually has 0 height, but currently overflows and is visible. If we set overflow as hidden, then the input and list will be hidden.

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

Set flex: 1 to the parent View here.

App/src/pages/Search/SearchPageNarrow.tsx

Lines 142 to 144 in 14c5b21

	<View style={[styles.narrowSearchHeaderStyle]}>
	<SearchPageHeader
	queryJSON={queryJSON}

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

N/A

[melvin-bot]

@alexpensify Whoops! This issue is 2 days overdue. Let's get this updated quick!

[alexpensify]

I'm able to replicate when searching Reports via the application

[melvin-bot]

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

[melvin-bot]

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

[alexpensify]

@ikevin127 can you please confirm if @bernhardoj's solution will fix this issue? Thanks!

[ikevin127]

I hereby confirm that @bernhardoj's proposal makes sense. The root cause was identified correctly and the proposed solution fixes the issue. No tests are needed as this is a simple UI styling issue.

Here's a before / after applying the suggested solution:

iOS: Native

ba.mp4

🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @francoisl, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 @ikevin127 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[bernhardoj]

PR is ready

cc: @ikevin127