🐛 [BUG]: onConnect sourceHandle/targetHandle is null

[delphi-sucks]

Is there an existing issue for this?

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

Current Behavior

The Event onConnect gives the following object, if two nodes are connected:

{
  "source": "1",
  "sourceHandle": null,
  "target": "2",
  "targetHandle": null,
}

Expected Behavior

The Event onConnect should also contain the handles

{
  "source": "1",
  "sourceHandle": "1__handle-right",
  "target": "2",
  "targetHandle": "2__handle-left",
}

Steps To Reproduce

Use the following example (or the curent one in the website) and connect the nodes.

console.log will return the invalid object.

<script setup>
import { ref } from 'vue'
import { VueFlow, useVueFlow } from '@vue-flow/core'

const nodes = ref([
  {
    id: '1',
    position: { x: 0, y: 0},
  },
  {
    id: '2',
    position: { x: 250, y: 0 },
  },
])

</script>

<template>
  <VueFlow
    :nodes="nodes"
    @connect="(connection) => console.log(connection)"
  />
</template>

Relevant log output

No response

Anything else?

It previously worked on version 1.23.0.

[bcakmakoglu]

This has been changed. Handles will not receive default ids anymore since that lead to it's own bugs and issues.
If you want handle ids to not be null, assign an explicit id to the handle.

[delphi-sucks]

Alright ^^b

For Documentation sake for anyone working with old data, that would need to be migrated otherwise:

<template>
    <slot />
    <Handle
        :id="`${props.id}__handle-top`"
        :position="Position.Top"
    />
    <Handle
        :id="`${props.id}__handle-left`"
        :position="Position.Left"
    />
    <Handle
        :id="`${props.id}__handle-right`"
        :position="Position.Right"
    />
    <Handle
        :id="`${props.id}__handle-bottom`"
        :position="Position.Bottom"
    />
</template>

<script setup lang="ts">
import { Handle, NodeProps, Position } from "@vue-flow/core";

const props = defineProps<NodeProps>();
</script>