Skip to content

fix: pass passive false for touch events in listenOnTheHost#137

Merged
mattlewis92 merged 3 commits intomainfrom
stop-prevent-default-call-in-passive-event-listeners
Mar 11, 2026
Merged

fix: pass passive false for touch events in listenOnTheHost#137
mattlewis92 merged 3 commits intomainfrom
stop-prevent-default-call-in-passive-event-listeners

Conversation

@jcrymble-clickup
Copy link
Copy Markdown
Collaborator

Problem

On touch devices, the resize handle registers touchstart / touchend / touchcancel via fromEvent() with no options. Browsers treat these as passive by default, so when onMousedown calls event.preventDefault() the call is ignored and the console shows:

Unable to preventDefault inside passive event listener

Solution

In listenOnTheHost, pass { passive: false } as the third argument to fromEvent() for touch events (touchstart, touchend, touchcancel) so preventDefault() is allowed and the warning is removed.

Changes

  • resize-handle.directive.ts: Use EventListenerOptions for touch events (passive: false); use an empty object for non-touch events so the same fromEvent(..., options) overload is used and TypeScript is satisfied.

No behavior change for mouse events; touch resize continues to work and the passive-listener warning is resolved.

@codecov
Copy link
Copy Markdown

codecov bot commented Mar 11, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 81.27%. Comparing base (3b052b2) to head (7bac69c).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main     #137      +/-   ##
==========================================
+ Coverage   81.13%   81.27%   +0.13%     
==========================================
  Files           5        6       +1     
  Lines         281      283       +2     
  Branches       59       61       +2     
==========================================
+ Hits          228      230       +2     
  Misses         42       42              
  Partials       11       11              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

eventName === 'touchend' ||
eventName === 'touchcancel';
const source$ = isTouchEvent
? fromEvent<T>(this.element.nativeElement, eventName, { passive: false })
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: move the ternary into the option like isTouchEvent ? { passive: false } : undefined)

Copy link
Copy Markdown
Collaborator Author

@jcrymble-clickup jcrymble-clickup Mar 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated in 7bac69c

It now uses either { passive: false } or empty object {} as undefined isn't a valid argument

Copy link
Copy Markdown
Owner

@mattlewis92 mattlewis92 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@mattlewis92 mattlewis92 merged commit f31aaeb into main Mar 11, 2026
3 checks passed
@mattlewis92 mattlewis92 deleted the stop-prevent-default-call-in-passive-event-listeners branch March 11, 2026 14:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants