[Due for payment 2025-07-22] [$250] Web - Mention(@) and emoji(:) popup does not close when dragging a file

[mitarachim]

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: undefined
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://github.com/Expensify/Expensify/issues/353942
Email or phone of affected tester (no customers): undefined
Issue reported by: Applause Internal Team
Device used: undefined
App Component: undefined

Action Performed:

1.Navigate to https://staging.new.expensify.com
2.Open any Chat
3.Write @ or : and any emoji name,
4.While the popup is open Drag a file onto the chat

Expected Result:

The popup should be dismissed

Actual Result:

Mention(@) and emoji(:) popup does not close when dragging a file

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

Bug6828807_1747064018938.Recording__14__3_.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021939667270344386605
• Upwork Job ID: 1939667270344386605
• Last Price Increase: 2025-06-30
• Automatic offers:
• NJ-2020 | Contributor | 107905881

Issue Owner

Current Issue Owner: @flaviadefaria

[melvin-bot]

Triggered auto assignment to @flaviadefaria (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]

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

[melvin-bot]

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

[melvin-bot]

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

[NJ-2020]

Proposal

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

Web - Mention(@) and emoji(:) popup does not close when dragging a file

What is the root cause of that problem?

We already have a logic here to handle drag drop events inside the popover menu

App/src/pages/home/report/ReportActionCompose/Suggestions.tsx

Lines 143 to 148 in 1f86bd1

	useEffect(() => {
	if (!(!prevIsDraggingOver && isDraggingOver)) {
	return;
	}
	updateShouldShowSuggestionMenuToFalse();
	}, [isDraggingOver, prevIsDraggingOver, updateShouldShowSuggestionMenuToFalse]);

But it doesn't working properly because the drag drop event doesn't get fired after the popover menu shows up

It's because it got overlapped by TransparentOverlay which prevents the drag drop event from being fired and the drag drop ui only listen to some components ref including: ReportScreen, ReportActionCompose, etc

App/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.tsx

Lines 40 to 42 in 1f86bd1

	ReactDOM.createPortal(
	<>
	<TransparentOverlay onPress={resetSuggestions} />

App/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/TransparentOverlay.tsx

Lines 41 to 45 in 1f86bd1

	return (
	<View
	onPointerDown={handlePointerDown}
	style={styles.fullScreen}
	>

So when we drag drop the attachment file into the TransparentOverlay, the drag drop event won't get triggered since we don't have any listener for TransparentOverlay

App/src/hooks/useDragAndDrop/index.ts

Lines 120 to 123 in 1f86bd1

	dropZoneRef.addEventListener(DRAG_OVER_EVENT, dropZoneDragHandler);
	dropZoneRef.addEventListener(DRAG_ENTER_EVENT, dropZoneDragHandler);
	dropZoneRef.addEventListener(DRAG_LEAVE_EVENT, dropZoneDragHandler);
	dropZoneRef.addEventListener(DROP_EVENT, dropZoneDragHandler);

The TransparentOverlay was added to resolve this issue

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

Listen to drag drop events inside TransparentOverlay and hide the TransparentOverlay if the user is dragging/dropping file

function TransparentOverlay({onPress: onPressProp}: TransparentOverlayProps) {
    ...
    const dropZone = useRef<HTMLDivElement | View>(null);
    const {isDraggingOver} = useDragAndDrop({
        dropZone: htmlDivElementRef(dropZone),
        onDrop: () => {},
    });

    ...

    return (
        <View
            onPointerDown={handlePointerDown}
            style={[styles.fullScreen, isDraggingOver && styles.dNone]}
            ref={viewRef(dropZone)}
        >
            <PressableWithoutFeedback
                onPress={onPress}
                style={[styles.flex1, styles.cursorDefault, overlay]}
                accessibilityLabel={translate('common.close')}
                role={CONST.ROLE.BUTTON}
            />
        </View>
    );
}

Demo

Screen.Recording.2025-07-01.at.14.54.34.mov

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

NA - UI bug

What alternative solutions did you explore? (Optional)

[flaviadefaria]

@rushatgabhane what do you think about the above proposal?