Unable to preventDefault inside passive event listener invocation using Quasar Framework

Question

I am using the Quasar Framework on a Vue3 application.

I have "successfully" integrated the <q-slider /> component. However, upon panning the knob on the component, the following message gets logged on the console.

Unable to preventDefault inside passive event listener invocation

Efforts to resolve the issue have pointed me towards the browser with a common css solution being style="touch-action: pan-x;" but this does not work for me.

I have tested this on;

• Chrome: issue exists,
• Edge: issue exists,
• Firefox: issue exists
• Safari: issue DOES NOT exist.

My Quasar versions are:

• "@quasar/extras": "^1.16.9",
• "quasar": "^2.15.1",
• "@quasar/app-vite": "^1.8.0",

Edit: Code snippet

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { sumBy } from 'lodash'

const strategy = ref([
  { label: 'Needs', color: 'primary', value: 50 },
  { label: 'Wants', color: 'negative', value: 29 },
  { label: 'Savings', color: 'positive', value: 20 },
])

const balance = computed(() => 100 - sumBy(strategy.value, 'value'))
</script>

<template>
  <div>
    <div
      v-for="item, index in strategy"
      :key="`strategy-item-${index}`"
    >
      <div class="row text-caption">
        <span class="text-body2">
          {{ item.label }}
        </span>
        <q-space></q-space>
        {{ item.value }}%
      </div>
      <q-slider
        snap
        :step="5"
        :max="100"
        :color="item.color"
        v-model="item.value"
        :inner-max="item.value + balance"
      />
    </div>
  </div>
</template>

Answer 1

As per script, there are some solutions for that you can try one of them hope it will works in your case

1. Add {passive:false} :
   • Find the event listener that is causing the violation to trigger. and add {passive:false} as a third argument (source)

   window.addEventListener('touchstart', function() {
        // some logic
   }, {passive:false}); 

2. Add touch-action: none; css :
   • If you call preventDefault on touchstart then you should also have a CSS rule to disable touch scrolling like

Thank you