3. <PullHook/> Web Components - Unable to preventDefault inside passive event listener invocation

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

<PullHook/> Web Components - Unable to preventDefault inside passive event listener invocation

  • C

    I am not sure if this is the correct place to post.

    Using: https://onsen.io/v2/api/js/ons-pull-hook.html

    To replicate:

    1. Visit (I am using Chrome Version 65.0.3325.181 (Official Build) (64-bit))
      https://onsen.io/playground/
    2. Paste in the following:
    <ons-splitter>
  <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
    <ons-page>
      <ons-list>
        <ons-list-item onclick="fn.load('test.html')" tappable>
          Home
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-splitter-side>
  <ons-splitter-content id="content" page="test.html"></ons-splitter-content>
</ons-splitter>

<template id="test.html">
  <ons-page>
    <ons-toolbar>
      <div class="center">Unable to preventDefault inside passive event listener invocation.</div>
    </ons-toolbar>
    <ons-pull-hook ref="pullHook">
      Pull to refresh
    </ons-pull-hook>
    <ons-list>
      <ons-list-item>Item 1</ons-list-item>
      <ons-list-item>Item 2</ons-list-item>
      <ons-list-item>Item 3</ons-list-item>
      <ons-list-item>Item 4</ons-list-item>
      <ons-list-item>Item 5</ons-list-item>
      <ons-list-item>Item 6</ons-list-item>
    </ons-list>
  </ons-page>
</template>
    1. Hit F12
    2. Ctrl-Shift-M (or click toggle device toolbar)
    3. Click ‘Android’ and ‘Run’
    4. Pull to refresh the list and see in console:
      Unable to preventDefault inside passive event listener invocation.

    preventDefault @ gesture-detector.js:859
    _onDrag @ ons-pull-hook.js:183
    triggerEvent @ gesture-detector.js:1320
    dragGesture @ gesture-detector.js:1485
    triggerGesture @ gesture-detector.js:1019
    each @ gesture-detector.js:261
    detect @ gesture-detector.js:1016
    doDetect @ gesture-detector.js:721
    onTouchHandler @ gesture-detector.js:657

    In my project I only get this when set to an Android device in Chrome.

    Any idea why this is? Functionality seems fine though I would rather have no error/warning.

    0
  • Onsen UI

    Thanks for posting this. Recently we changed a lot of event listeners to be passive for performance reasons. The Chrome blog has a good post on passive event listeners if you’re interested.

    One side effect is that we can’t use preventDefault inside those listeners. We must have missed this one. It won’t affect your app, but it’s not nice to see errors in the console. I have created a GitHub issue to track it.

    0
  • C

    Great, thanks. I do notice that this error shows both in Android and iOS using the method above. Maybe add a note to GitHub to ensure all is ok?

    0