[Due for payment 2025-11-07] [$250] Track distance - Console error: "Unable to preventDefault inside passive event listener invocation"

[izarutskaya]

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.34-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @QichenZhu
Slack conversation (hyperlinked to channel name): expensify_bugs

Action Performed:

1. Open https://staging.new.expensify.com/ on Android Chrome
2. Tap Create > Track distance > Map > Start > Use current location

Expected Result:

No console errors

Actual Result:

Console shows "Unable to preventDefault inside passive event listener invocation"

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

Recording.3458.mp4

.txt

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021980299674424236647
• Upwork Job ID: 1980299674424236647
• Last Price Increase: 2025-10-20

Issue Owner

Current Issue Owner: @joekaufmanexpensify

[melvin-bot]

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

[daledah]

Proposal

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

Console shows "Unable to preventDefault inside passive event listener invocation"

What is the root cause of that problem?

The warning occurs because onTouchStart is trying to call preventDefault() inside what's registered as a passive event listener. Modern browsers mark touch event listeners as passive by default for better scrolling performance, which prevents calling preventDefault().

App/src/components/AddressSearch/CurrentLocationButton.tsx

Lines 19 to 27 in 7c43de2

	<PressableWithFeedback
	style={[styles.flexRow, styles.pv4, styles.ph3, isDisabled && styles.buttonOpacityDisabled]}
	hoverStyle={StyleUtils.getButtonBackgroundColorStyle(getButtonState(true), true)}
	onPress={() => onPress?.()}
	accessibilityLabel={translate('location.useCurrent')}
	disabled={isDisabled}
	onMouseDown={(e) => e.preventDefault()}
	onTouchStart={(e) => e.preventDefault()}
	>

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

We can remove the onTouchStart handler. The PressableWithFeedback component already handles touch events appropriately, and the onMouseDown handler is sufficient

        <PressableWithFeedback
            style={[styles.flexRow, styles.pv4, styles.ph3, isDisabled && styles.buttonOpacityDisabled]}
            hoverStyle={StyleUtils.getButtonBackgroundColorStyle(getButtonState(true), true)}
            onPress={() => onPress?.()}
            accessibilityLabel={translate('location.useCurrent')}
            disabled={isDisabled}
            onMouseDown={(e) => e.preventDefault()}
        >

Note: we can check other onTouchStart places

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.

[melvin-bot]

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

[melvin-bot]

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

[zainAwan9175]

Proposal

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

When users tap “Use current location” on Android Chrome, the browser logs the warning:

“Unable to preventDefault inside passive event listener invocation.”

What is the root cause of that problem?

This occurs because touch events on Android Chrome are passive by default, meaning preventDefault() cannot be called inside them.

In the CurrentLocationButton component, the onTouchStart handler attempts to call e.preventDefault() for all browsers.

App/src/components/AddressSearch/CurrentLocationButton.tsx

Lines 19 to 27 in 7c43de2

	<PressableWithFeedback
	style={[styles.flexRow, styles.pv4, styles.ph3, isDisabled && styles.buttonOpacityDisabled]}
	hoverStyle={StyleUtils.getButtonBackgroundColorStyle(getButtonState(true), true)}
	onPress={() => onPress?.()}
	accessibilityLabel={translate('location.useCurrent')}
	disabled={isDisabled}
	onMouseDown={(e) => e.preventDefault()}
	onTouchStart={(e) => e.preventDefault()}
	>

However, Android Chrome treats touch event listeners as passive, so calling preventDefault() there triggers the warning.

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

Detect whether the environment is Android Chrome using the existing isMobileChrome() helper.
Skip calling preventDefault() on Android Chrome to avoid the warning.
Retain preventDefault() for other browsers to maintain existing behavior.

onTouchStart={(e) => {
                // On Android Chrome, touch events are passive by default, so we can't call preventDefault()
                // Skip preventDefault to avoid console error: "Unable to preventDefault inside passive event listener invocation"
                if (isMobileChrome()) {
                    return;
                }
                if ('preventDefault' in e) {
                     e.preventDefault();
                   }
            }}

Result:

screen-capture.webm

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

n/A

What alternative solutions did you explore? (Optional)

n/A

[PiyushChandra17]

Proposal

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

Track distance - Console error: "Unable to preventDefault inside passive event listener invocation"

What is the root cause of that problem?

We are calling e.preventDefault() here

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

1. remove that e.preventDefault() in both places

<PressableWithFeedback
      style={[styles.flexRow, styles.pv4, styles.ph3, isDisabled && styles.buttonOpacityDisabled]}
      hoverStyle={StyleUtils.getButtonBackgroundColorStyle(getButtonState(true), true)}
      onPress={() => onPress?.()}
      accessibilityLabel={translate('location.useCurrent')}
      disabled={isDisabled}
  >

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

n/A

What alternative solutions did you explore? (Optional)

Or we can conditionally skip e.preventDefault() on android mweb , add platform specific code