[HOLD for payment 2024-04-03] [PAY MARCH 27][$500] mweb - Distance - App opens Scan tab when dragging map to the right

[kbecciv]

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: v1.4.41-3
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://expensify.testrail.io/index.php?/tests/view/4312540
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Go to staging.new.expensify.com on mweb.
2. Go to FAB > Request money > Distance.
3. Drag the map to the right.
4. Repeat Step 2 and 3 on Android app.

Expected Result:

Mag is dragged and app will not open Scan tab.

Actual Result:

App opens Scan tab when attempting to drag map to the right.
On Android app, app does not open Scan tab when dragging map to the right.

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6379356_1707916207597.Screen_Recording_20240214_183950_New_Expensify.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~012c070998a0d47da2
• Upwork Job ID: 1757783384527659008
• Last Price Increase: 2024-02-21
• Automatic offers:
• situchan | Reviewer | 0
• aswin-s | Contributor | 0

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @slafortune (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[kbecciv]

We think that this bug might be related #wave5-free-submitters
CC @dylanexpensify

[aswin-s]

Proposal

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

Swiping to the right on the map view on the Distance tab switches the tab on Android mobile web browser.

What is the root cause of that problem?

This seems to be a regression from #27491. In the PR we switched from onStartShouldSetPanResponder to onMoveShouldSetPanResponder for intercepting swipe events inside MapView.

But on Android mWeb just responding to onMove gesture doesn't seem to be preventing the event from bubbling up and activating the Tab Navigator.

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

Revert to onStartShouldSetPanResponder event for handling gesture. This change doesn't seem to cause the original issue #26761 where the attribution icon is not tappable. So the root cause might have been something different.

App/src/components/SwipeInterceptPanResponder.tsx

Line 4 in 0381d57

onMoveShouldSetPanResponder: () => true,

const SwipeInterceptPanResponder = PanResponder.create({
    // Revert to onStart event
    onStartShouldSetPanResponder: () => true,
    onPanResponderTerminationRequest: () => false,
});

This ensures that TouchMove doesn't trigger Tab change on Android mWeb

What alternative solutions did you explore? (Optional)

None