[BUG] sourceHandle / targetHandle not working with edges when multiple handle ids are present

I was evaluating this library for our web app. I was trying to source an edge line from a custom node’s top (name: BidirectionalNode) to another custom node’s bottom (name: Test). Even after adding IDs to all the nodes and accordingly mentioning them in the edge configuration, the desired connection did not seem to work. It was supposed to connect from “BidirectionalNode” node’s top to “Test” node’s bottom, instead it’s always connecting from “BidirectionalNode” node’s top to “Test” node’s left.

Am I configuring it incorrectly or is it a bug?

Here are the 3 files I am using:

BidirectionalNode.js (Custom Node 1)

import React from 'react';
import { Handle } from 'react-flow-renderer';

import './flow.scss';

const customNodeStyles = {
	background: '#9CA8B3',
	color: '#FFF',
    padding: 10,
    borderRadius: 2,
    border: '1px solid #ccc',
};

const BidirectionalNode = () => (
	<div style={customNodeStyles}>
		<div className="node">
			<div className="label"> Bi-Directional </div>
			<div className="value"> 1,561 </div>
			<div className="pct"> 0.335 % </div>
		</div>
		<Handle id="sourcetop" type="source" position="top" />
		<Handle
			type="source"
			position="bottom"
			id="sourcebottom"
		/>
	</div>
);

export default BidirectionalNode;

Test.js (Custom Node 2)

import React from 'react';
import { Handle } from 'react-flow-renderer';

import './flow.scss';

const customNodeStyles = {
	background: '#EDF8FD',
	color: '#333',
    padding: 10,
    borderRadius: 2,
    border: '1px solid #ccc',
};

const Test = () => (
	<div style={customNodeStyles}>
		<div className="node">
			<div className="label"> Node Connection Test </div>
			<div className="value"> 1,561 </div>
			<div className="pct"> 0.335 % </div>
		</div>
        <Handle id="lefttarget" type="target" position="left" />
		<Handle
			type="target"
			position="bottom"
			id="bottomtarget"
		/>
	</div>
);

export default Test;

FlowRendererComponent.js (Flow Chart Component)

import React, { useState, useEffect } from 'react';
import ReactFlow, {
	ReactFlowProvider,
	removeElements,
	addEdge,
	useStoreState,
} from 'react-flow-renderer';

import BidirectionalNode from './BidirectionalNode';
import Test from './Test';

import './flow.scss';

const onLoad = (reactFlowInstance) => {
	console.log('flow loaded:', reactFlowInstance);
	reactFlowInstance.fitView();
};

const nodeTypes = {
	special: BidirectionalNode,
	test: Test,
};

const initialElements = [
	{
		id: '7',
		type: 'special',
		position: { x: 325, y: 145 },
	},
	{
		id: '8',
		type: 'test',
		position: { x: 470, y: 10 },
	},
	{
		id: 'e7-8', source: '7', target: '8', sourceHandle: 'sourcetop', targetHandle: 'bottomtarget', type: 'smoothstep', arrowHeadType: 'arrowclosed',
	},
];


const FlowRendererComponent = (props) => {
	const [elements, setElements] = useState(initialElements);
	const { width, height } = props;
	const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els));
	const onNodeDragStop = (e, node) => {
		console.log("drag stop node ", node);
	};
	// const onElementClick = (event, element) => window.alert('clicked id '+ element.id);
	const onConnect = (params) => setElements((els) => addEdge(params, els));
	const NodesDebugger = () => {
		const nodes = useStoreState(state => state.nodes);
		// console.log(nodes);
		return null;
	};

	return (
		<ReactFlowProvider>
			<div className="react-flow-chart" style={{ height: `${height}px`, width: `${width}px` }}>
				<ReactFlow
					elements={elements}
					nodeTypes={nodeTypes}
					onElementsRemove={onElementsRemove}
					onNodeDragStop={onNodeDragStop}
					onConnect={onConnect}
					snapToGrid
					snapGrid={[15, 15]}
					onLoad={onLoad}
					// onElementClick={onElementClick}
				>
					<NodesDebugger />
				</ReactFlow>
			</div>
		</ReactFlowProvider>
	);
};
export default FlowRendererComponent;

Here is an illustration:

[Gunner17]

It’s working after upgrading to 7.1.2

[Gunner17]

Hey @Gunner17

I ran your code and it looks like this:

which version are you using?

Thanks for pointing out! I was using 6.x.x.