[Due for payment 2025-11-26] [$250] mweb/Safari - Chat - Unable to scroll page after slide down from first row of user suggestion list

[lanitochka17]

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.2.46-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://test-management.browserstack.com/projects/2219752/test-runs/TR-1859/folder/13176681/41236997/999691858
Issue reported by: Applause - Internal Team

Action Performed:

1. Open https://staging.new.expensify.com/
2. Navigate to any conversation or workspace chat
3. Type "@" in the compose box
4. Put finger at the first row of user suggestion list and slide down (slide down, not scroll the list)

Expected Result:

After slide down the suggestion list, user can scroll the page

Actual Result:

After slide down the suggestion list, user unable to scroll the page until close keyboard

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Platforms Tested:

On which of our officially supported platforms was this issue tested:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6997246_1762534592185.Btmp5276_1_.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021987639343571361066
• Upwork Job ID: 1987639343571361066
• Last Price Increase: 2025-11-09
• Automatic offers:
• situchan | Reviewer | 109427630

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.

[TaduJR]

Proposal

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

On iOS mWeb Safari, when a user types "@" to trigger the user suggestion list, puts their finger on the first row of the suggestion list, and slides down (attempting to scroll the page), the entire page becomes unscrollable until the keyboard is closed.

What is the root cause of that problem?

The root cause is overly aggressive use of preventDefault() in onPointerDown event handlers across three components in the autocomplete suggestion system:

1. App/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx

   Lines 94 to 99 in 47dc636

   	onPointerDown={(e) => {
   	if (DeviceCapabilities.hasHoverSupport()) {
   	return;
   	}
   	e.preventDefault();
   	}}

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

   Lines 74 to 80 in 47dc636

   	container.onpointerdown = (e) => {
   	if (hasHoverSupport()) {
   	return;
   	}
   	e.preventDefault();
   	};
   	return () => (container.onpointerdown = null);

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

   Lines 38 to 40 in 47dc636

   	const handlePointerDown = useCallback((e: PointerEvent) => {
   	e?.preventDefault();
   	}, []);

These handlers call preventDefault() unconditionally for all non-hover devices. While this successfully prevents focus from shifting away from the composer input when users tap on suggestions, it also blocks the default scroll behavior for touch gestures.

When a user starts a touch gesture on the suggestion list and attempts to scroll the page by sliding down, the pointerdown event fires and calls preventDefault(), which blocks the browser's native scroll handling. This prevents the page from scrolling even after the touch moves outside the suggestion container bounds.

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

We should modify the three onPointerDown handlers to check the pointerType and only call preventDefault() for mouse interactions, not touch interactions. This will:

• Preserve the existing behavior for mouse users (preventing focus loss)
• Allow touch users to scroll the page naturally while still being able to tap suggestions

Changes Required:

File 1: src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx

App/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx

Lines 94 to 99 in 47dc636

	onPointerDown={(e) => {
	if (DeviceCapabilities.hasHoverSupport()) {
	return;
	}
	e.preventDefault();
	}}

To:

onPointerDown={(e) => {
    if (DeviceCapabilities.hasHoverSupport()) {
        return;
    }
    // Only prevent default for mouse events, not touch events
    // Touch events need to allow scrolling while still enabling selection
    if (e.nativeEvent.pointerType !== 'touch') {
        e.preventDefault();
    }
}}

File 2: src/components/AutoCompleteSuggestions/index.tsx

App/src/components/AutoCompleteSuggestions/index.tsx

Lines 74 to 80 in 47dc636

	container.onpointerdown = (e) => {
	if (hasHoverSupport()) {
	return;
	}
	e.preventDefault();
	};
	return () => (container.onpointerdown = null);

To:

container.onpointerdown = (e) => {
    if (hasHoverSupport()) {
        return;
    }
    // Only prevent default for mouse events, not touch events
    // Touch events need to allow scrolling while still enabling selection
    if (e.pointerType !== 'touch') {
        e.preventDefault();
    }
};

File 3: src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/TransparentOverlay.tsx

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

Lines 38 to 40 in 47dc636

	const handlePointerDown = useCallback((e: PointerEvent) => {
	e?.preventDefault();
	}, []);

To:

const handlePointerDown = useCallback((e: PointerEvent) => {
    // Only prevent default for mouse events, not touch events
    // Touch events need to allow scrolling while still enabling overlay dismissal
    if (e.nativeEvent.pointerType !== 'touch') {
        e?.preventDefault();
    }
}, []);

[bernhardoj]

Proposal

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

When scrolling down from the topmost of the mentions list modal, the viewport is scrolled.

What is the root cause of that problem?

The default behavior on web is that if it reaches the edge of a scrollable element, it will start scrolling to the neighboring scrollable element. This was controlled by overscroll-behavior. In our case here, we are already at the topmost of the mentions list, so when we scroll up, the viewport is scrolled.

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

We need to prevent it by setting the overscroll behavior on the mention list to contain/none.

App/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx

Lines 102 to 104 in 2854edc

	<FlatList
	ref={scrollRef}
	keyboardShouldPersistTaps="handled"

style={{overscrollBehavior: 'none'}}

[VictoriaExpensify]

Unable to repro on mWeb Chrome so it seems to be unique to Safari, but we should fix it.

[melvin-bot]

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

[melvin-bot]

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

[IjaazA]

🚫 Duplicated proposal withdrawn by 🤖 ProposalPolice.