[Due for payment 2025-09-16] [$250] Android - Suggestions box is displayed above the composer with an unusually large gap

[jponikarchuk]

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.1.69-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: Edge case links - #57734
https://github.com/Expensify/Expensify/issues/492632
Email or phone of affected tester (no customers): Slottwo1 75newiop@gmail.com
Issue reported by: Applause Internal Team
Device used: Redminote 10s android 13 phone
App Component: Chat Report View

Action Performed:

1. Launch app
2. Open any room chat or create one if necessary.
   Send a mention of any user that is not part of the room.
3. Send another mention of a different user that is not part of the room.
4. Return to inbox and open room again, so the system message for the first mention, appears again.
5. With the keyboard opened, long tap over the second mention and select "Edit Message"

Expected Result:

The suggestions box must be displayed above the composer, without an unusually large gap.

Actual Result:

The suggestions box is displayed above the composer with an unusually large gap.

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

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021939994800416377331
• Upwork Job ID: 1939994800416377331
• Last Price Increase: 2025-08-12

Issue Owner

Current Issue Owner: @dylanexpensify

[melvin-bot]

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

[melvin-bot]

@dylanexpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[Eskalifer1]

Proposal

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

Android - Suggestions box is displayed above the composer with an unusually large gap

What is the root cause of that problem?

The main problem is this useEffect:

App/src/components/AutoCompleteSuggestions/index.tsx

Lines 85 to 152 in 56d08a4

	useEffect(() => {
	if (!measureParentContainerAndReportCursor || isKeyboardAnimatingRef.current) {
	return;
	}
	if (!windowHeight || !windowWidth || !suggestionsLength) {
	setContainerState(initialContainerState);
	return;
	}
	measureParentContainerAndReportCursor(({x, y, width, scrollValue, cursorCoordinates}: MeasureParentContainerAndCursor) => {
	const xCoordinatesOfCursor = x + cursorCoordinates.x;
	const bigScreenLeftOffset =
	xCoordinatesOfCursor + CONST.AUTO_COMPLETE_SUGGESTER.BIG_SCREEN_SUGGESTION_WIDTH > windowWidth
	? windowWidth - CONST.AUTO_COMPLETE_SUGGESTER.BIG_SCREEN_SUGGESTION_WIDTH
	: xCoordinatesOfCursor;
	const contentMaxHeight = measureHeightOfSuggestionRows(suggestionsLength, true);
	const contentMinHeight = measureHeightOfSuggestionRows(suggestionsLength, false);
	let bottomValue = windowHeight - (cursorCoordinates.y - scrollValue + y) - keyboardHeight;
	const widthValue = shouldUseNarrowLayout ? width : CONST.AUTO_COMPLETE_SUGGESTER.BIG_SCREEN_SUGGESTION_WIDTH;
	const isEnoughSpaceToRenderMenuAboveForBig = isEnoughSpaceToRenderMenuAboveCursor({
	y,
	cursorCoordinates,
	scrollValue,
	contentHeight: contentMaxHeight,
	topInset,
	});
	const isEnoughSpaceToRenderMenuAboveForSmall = isEnoughSpaceToRenderMenuAboveCursor({
	y,
	cursorCoordinates,
	scrollValue,
	contentHeight: contentMinHeight,
	topInset,
	});
	const newLeftOffset = shouldUseNarrowLayout ? x : bigScreenLeftOffset;
	// If the suggested word is longer than 150 (approximately half the width of the suggestion popup), then adjust a new position of popup
	const isAdjustmentNeeded = Math.abs(prevLeftValue.current - bigScreenLeftOffset) > 150;
	if (isInitialRender.current || isAdjustmentNeeded) {
	isSuggestionMenuAboveRef.current = isSuggestionMenuRenderedAbove(isEnoughSpaceToRenderMenuAboveForBig, isEnoughSpaceToRenderMenuAboveForSmall);
	leftValue.current = newLeftOffset;
	isInitialRender.current = false;
	prevLeftValue.current = newLeftOffset;
	}
	let measuredHeight = 0;
	if (isSuggestionMenuAboveRef.current && isEnoughSpaceToRenderMenuAboveForBig) {
	// calculation for big suggestion box above the cursor
	measuredHeight = measureHeightOfSuggestionRows(suggestionsLength, true);
	} else if (isSuggestionMenuAboveRef.current && isEnoughSpaceToRenderMenuAboveForSmall) {
	// calculation for small suggestion box above the cursor
	measuredHeight = measureHeightOfSuggestionRows(suggestionsLength, false);
	} else {
	// calculation for big suggestion box below the cursor
	measuredHeight = measureHeightOfSuggestionRows(suggestionsLength, true);
	bottomValue = windowHeight - y - cursorCoordinates.y + scrollValue - measuredHeight - CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT - keyboardHeight;
	}
	setSuggestionHeight(measuredHeight);
	setContainerState({
	left: leftValue.current,
	bottom: bottomValue,
	width: widthValue,
	cursorCoordinates,
	});
	});
	}, [measureParentContainerAndReportCursor, windowHeight, windowWidth, keyboardHeight, shouldUseNarrowLayout, suggestionsLength, bottomInset, topInset, isKeyboardAnimatingRef]);

The problem is that this function is called at the moment when you scroll to Composer.

App/src/pages/home/report/ReportActionItemMessageEdit.tsx

Lines 356 to 379 in cad7e67

	const measureContainer = useCallback((callback: MeasureInWindowOnSuccessCallback) => {
	if (!containerRef.current) {
	return;
	}
	containerRef.current.measureInWindow(callback);
	}, []);
	const measureParentContainerAndReportCursor = useCallback(
	(callback: MeasureParentContainerAndCursorCallback) => {
	const {scrollValue} = getScrollPosition({mobileInputScrollPosition, textInputRef});
	const {x: xPosition, y: yPosition} = getCursorPosition({positionOnMobile: cursorPositionValue.get(), positionOnWeb: selection});
	measureContainer((x, y, width, height) => {
	callback({
	x,
	y,
	width,
	height,
	scrollValue,
	cursorCoordinates: {x: xPosition, y: yPosition},
	});
	});
	},
	[cursorPositionValue, measureContainer, selection],
	);

The scroll occurs in the onFocus function:

App/src/pages/home/report/ReportActionItemMessageEdit.tsx

Lines 473 to 477 in cad7e67

	InteractionManager.runAfterInteractions(() => {
	requestAnimationFrame(() => {
	reportScrollManager.scrollToIndex(index, true);
	});
	});

On the Web, scrolling occurs without animation, so this problem is not noticeable, but on the Android App and IOS App, animation occurs, which causes the y position to be calculated incorrectly.

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

It is necessary to check whether scrolling is taking place, and if so, execute the function only after the scrolling is completed.

To do this, add a state:

const [isScrolling, setIsScrolling] = useState(false);

Add a ref for timeout (since there is no direct way to track when the scroll is over):

const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);

Add a platform check as this logic is only needed on IOS and Android App:

const isIOSNative = getPlatform() === CONST.PLATFORM.IOS;
 const isAndroidNative = getPlatform() === CONST.PLATFORM.ANDROID;

    const shouldTrackScroll = isIOSNative || isAndroidNative;

Update the onFocus function:

                                setIsScrolling(true);
                                InteractionManager.runAfterInteractions(() => {
                                    requestAnimationFrame(() => {
                                        reportScrollManager.scrollToIndex(index, true);

                                        if (shouldTrackScroll)
                                            if (scrollTimeoutRef.current) {
                                                clearTimeout(scrollTimeoutRef.current);
                                            }

                                        scrollTimeoutRef.current = setTimeout(() => {
                                            setIsScrolling(false);
                                        }, 300);
                                    });
                                });

Update the measure function:

const measureParentContainerAndReportCursor = useCallback(
        (callback: MeasureParentContainerAndCursorCallback) => {
            const performMeasurement = () => {
                const {scrollValue} = getScrollPosition({mobileInputScrollPosition, textInputRef});
                const {x: xPosition, y: yPosition} = getCursorPosition({
                    positionOnMobile: cursorPositionValue.get(),
                    positionOnWeb: selection,
                });

                measureContainer((x, y, width, height) => {
                    callback({
                        x,
                        y,
                        width,
                        height,
                        scrollValue,
                        cursorCoordinates: {x: xPosition, y: yPosition},
                    });
                });
            };

            if (isScrolling && shouldTrackScroll) return;

            performMeasurement();
        },
        [cursorPositionValue, measureContainer, selection, isScrolling],
    );

I decided that it would be inappropriate to add this logic to useReportScrollManager, because in this case there will be problems with optimization, since each scroll will trigger 2 changes to the scroll state, but in most places this is simply not needed, and it is needed only in this place

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

None

What alternative solutions did you explore? (Optional)

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.

[dylanexpensify]

Reviewing today!

[melvin-bot]

@dylanexpensify Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

@dylanexpensify Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

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