[Help] [Mobile/Touch] [Chrome] Inclusion of v-click-outside directive causes Quasar menu's to fail to close when clicked. "Unable to preventDefault inside passive event listener due to target being treated as passive"

[douglasg14b]

Edit:

This is caused by just including the v-click-outside directive found here: https://github.com/ndelvalle/v-click-outside in the app (Not using the directive on components just Vue.use()`). Why this is, I have no idea?

Not sure if this is a quasar bug (WIth how quasar menu is handling the click, and calling preventDefault() eithout checking first) or an issue with the directive? There is no mention of passive in what the directive is doing at all.

---

Previous post

This is weird, and I cannot reproduce it in a new application or example. All QSelect component in my application do not close when tapped a 2nd time on mobile, and only on mobile.

If I long-press and release, it does not re-open. If that press is ~ <1second long it reopens when I release my finger.

The recording is in chrome using simulated touch, however, this also happens on actual phones.

<q-select :options="options" v-model="testModel" behavior="menu" style="width: 200px;"></q-select>

I'm on Quasar v1.15.19

What might be happening here?

These are the events when Tapped to open, and then tapped again:

These are the events when tapped to open, and then long-press and release:

[douglasg14b]

This lib looks like it just forwards events right back to Quasar's QMenu.__onClickOutside(). Which then proceeds to try and stopAndPreventClick(e) -> stopAndPrevent(e) which then calls e.preventDefault() which then throws Unable to preventDefault inside passive event listener due to target being treated as passive.

---

I think this may have to do with Quasar actually, under event.js quasar has:

export const listenOpts = {
  hasPassive: false,
  passiveCapture: true,
  notPassiveCapture: true
}

Both notPassiveCapture and passiveCapture have the same value.

and under src/components/menu/ClickOutside.js Quasar has:

document.addEventListener('touchstart', globalHandler, notPassiveCapture)

// Equivilant to:
document.addEventListener('touchstart', globalHandler, true)

This seems like a v-click-outside bug since the lib is not checking for passive support and providing the correct parameters if it exists. Google has a blog post on this change: (https://developers.google.com/web/updates/2017/01/scrolling-intervention):

The default behavior is for window, document or body elements is: window.addEventListener("touchstart", func, {passive: true} ); unless {passive: false} is passed in explicitly

More Info:

• https://developers.google.com/web/updates/2017/01/scrolling-intervention
• https://caniuse.com/passive-event-listener
• https://css-tricks.com/forums/topic/beware-of-passive-event-listeners-2/
• [Chrome] Unable to preventDefault inside passive event listener due to target being treated as passive. inuyaksa/jquery.nicescroll#799
• https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener