🐛 [BUG]: Uncaught TypeError: Cannot read properties of undefined (reading 'clientX')

[ColinMalecha]

Is there an existing issue for this?

• [X] I have searched the existing issues and this is a new bug.

Current Behavior

After upgrading to @vue-flow/core@1.41.2, when a node is clicked, a non-critical error is thrown:

@vue-flow_core.js?v=cf7b5e57:5032 Uncaught TypeError: Cannot read properties of undefined (reading 'clientX')
    at @vue-flow_core.js?v=cf7b5e57:5032:62
    at eventEnd (@vue-flow_core.js?v=cf7b5e57:4899:26)
    at HTMLDivElement.<anonymous> (@vue-flow_core.js?v=cf7b5e57:4927:149)
    at Dispatch.call (@vue-flow_core.js?v=cf7b5e57:533:18)
    at gesture (@vue-flow_core.js?v=cf7b5e57:1497:17)
    at HTMLDivElement.touchended (@vue-flow_core.js?v=cf7b5e57:1465:9)
    at HTMLDivElement.<anonymous> (@vue-flow_core.js?v=cf7b5e57:1147:14)

Expected Behavior

Detecting node click with @node-click="onNodeClick" calls a method to handle the node click, no errors should occur.

Steps To Reproduce

quasar@2.17.0 typescript@5.5.4 vue-tsc@2.0.29 vue@3.5.12

Relevant log output

No response

Anything else?

No response

[bcakmakoglu]

Please provide a proper reproduction of the issue before opening a ticket I can’t debug anything from this issue description.

[bcakmakoglu]

FYI a sandbox template can be found here: https://codesandbox.io/p/devbox/vue-flow-basic-gfgro4?file=%2Findex.html

once you provide a repro of the issue I’ll gladly take a look once I’m back from my vacation.

[ColinMalecha]

Myb, I did this in a rush. I'll take the time as soon as I can to make a repro. Enjoy your vacation.

[ColinMalecha]

Okay, I just spent the past 2 hours on this and I am baffled. I can't reproduce it myself and I don't get the error in my own repo anymore (which I have not updated since I made this)... So if I discover it again I'll open a new report and make a repro right away 😶

Sorry about this 😂

[ColinMalecha]

@bcakmakoglu This issue came up again, and I figured out its source.

Repro: https://codesandbox.io/p/devbox/hardcore-silence-6ppqds

The issue itself only occurs on mobile with a touchscreen, which stems from the FlowEvents Interface, nodeClick. I found and tested this in Firefox 132.0.1 and Chrome 130.0.6723.117. To cause the error to occur, go to Devtools > Responsive Design Mode (Firefox) or Device Toolbar (Chrome). When clicking on a node (touchscreen, or when in responsive mode simulating a mobile device), the following errors are thrown:

Firefox:

Uncaught TypeError: sourceEvent2.touches[0] is undefined 
vue-flow-core.mjs:4999:14
    useGetPointerPosition vue-flow-core.mjs:4999
    eventEnd vue-flow-core.mjs:4866
    dragHandler vue-flow-core.mjs:4894
    call vue-flow-core.mjs:483
    gesture vue-flow-core.mjs:1447
    touchended vue-flow-core.mjs:1415
    contextListener vue-flow-core.mjs:1097
    onAdd vue-flow-core.mjs:1138
    selection_each vue-flow-core.mjs:844
    selection_on vue-flow-core.mjs:1162
    drag2 vue-flow-core.mjs:1355
    selection_call vue-flow-core.mjs:815
    useDrag vue-flow-core.mjs:4899
    callWithErrorHandling runtime-core.esm-bundler.js:158
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:166
    job runtime-core.esm-bundler.js:1816
    callWithErrorHandling runtime-core.esm-bundler.js:158
    flushJobs runtime-core.esm-bundler.js:362
    flushJobs runtime-core.esm-bundler.js:372
vue-flow-core.mjs:4999:14
    useGetPointerPosition vue-flow-core.mjs:4999
    eventEnd vue-flow-core.mjs:4866
    dragHandler vue-flow-core.mjs:4894
    call vue-flow-core.mjs:483
    gesture vue-flow-core.mjs:1447
    touchended vue-flow-core.mjs:1415
    contextListener vue-flow-core.mjs:1097
    (Async: EventListener.handleEvent)
    onAdd vue-flow-core.mjs:1138
    selection_each vue-flow-core.mjs:844
    selection_on vue-flow-core.mjs:1162
    drag2 vue-flow-core.mjs:1355
    selection_call vue-flow-core.mjs:815
    useDrag vue-flow-core.mjs:4899
    callWithErrorHandling runtime-core.esm-bundler.js:158
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:166
    job runtime-core.esm-bundler.js:1816
    callWithErrorHandling runtime-core.esm-bundler.js:158
    flushJobs runtime-core.esm-bundler.js:362
    flushJobs runtime-core.esm-bundler.js:372

Chrome:

Uncaught TypeError: Cannot read properties of undefined (reading 'clientX')
    at chunk-Z7W7O6GG.js?v=c9cc5455:5069:62
    at eventEnd (chunk-Z7W7O6GG.js?v=c9cc5455:4936:26)
    at HTMLDivElement.<anonymous> (chunk-Z7W7O6GG.js?v=c9cc5455:4964:149)
    at Dispatch.call (chunk-Z7W7O6GG.js?v=c9cc5455:533:18)
    at gesture (chunk-Z7W7O6GG.js?v=c9cc5455:1497:17)
    at HTMLDivElement.touchended (chunk-Z7W7O6GG.js?v=c9cc5455:1465:9)
    at HTMLDivElement.<anonymous> (chunk-Z7W7O6GG.js?v=c9cc5455:1147:14)

The only changes to the code in App.vue:

// Do something with node Click
function onNodeClick() {
  console.log("node was clicked");
}

</script>

<template>
  <div style="height: 100vh">

<!-- Trigger Node Click by adding @node-click-->

    <VueFlow
      v-model:nodes="nodes"
      v-model:edges="edges"
      fit-view-on-init
      class="vue-flow-basic-example"
      :default-zoom="1.5"
      :min-zoom="0.2"
      :max-zoom="4"
      @node-click="onNodeClick"
    >

Please let me know if you need any more information :)

[bcakmakoglu]

I'll check it out, thanks for the detailed report ^^

[bcakmakoglu]

Can't seem to be able to reproduce this locally in the latest version. 🤔

[bcakmakoglu]

Mh... I can reproduce it on FireFox though, it'll be fixed in the next minor version ^^