[@use-gesture/vanilla] Touch event was abnormally interrupted.

[mchao123]

Describe the bug

console error: actions-fe213e88.esm.js:332 Unable to preventDefault inside passive event listener invocation.

Sandbox or Video

The tug event will be abnormally interrupted, and the problem only occurs on emulated devices and cell phones

<script setup lang="ts">
import { DragGesture } from "@use-gesture/vanilla";
import anime from "animejs";
import { type Directive } from "vue";


let gesture: DragGesture;

const vDarg: Directive<HTMLDivElement> = {
    mounted(el, binding, vnode, prevVnode) {
        gesture = new DragGesture(el, ({ active, movement: [mx, my],...e }) => {
            console.log(active,my,e)
            anime({
                targets: el,
                translateY: active ? my : 0,
                duration: active ? 0 : 1000
            });
        }, {
            preventDefault: true,
            filterTaps: true
        });
    },
    unmounted(el, binding, vnode, prevVnode) {
        gesture.destroy();
    }
}

</script>
<template>
    <div class="modal-bg" />
    <div class="modal" v-darg>
        test<br><br><br><br>
    </div>
</template>
<style lang="scss" scoped>
.modal-bg {
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
}

.modal {
    font-size: 1.2rem;
    position: fixed;
    z-index: 99;
    box-sizing: content-box;
    padding-bottom: 40vh;
    margin-bottom: -40vh;
    bottom: 0;
    background-color: #fff;
    box-shadow: 0 0 1rem #0001;
    left: 50%;
    margin-left: -50%;
    width: 100%;
    touch-action: none
}
</style>

Information:

• Use Gesture version: v10.3.1
• Browser Edge、Chrome

Checklist:

• I've read the documentation.
• If this is an issue with drag, I've tried setting touch-action: none to the draggable element.

[mchao123]

It's my problem.

*{
  touch-action: none;
}