BUG Blazor Diagram Component Connector SourceID Incorrectly Defaults to First Node Selected When Dragging from Dynamically

Summary

When creating connectors by dragging from ports on dynamically added nodes in the Syncfusion Blazor Diagram component, the connector's SourceID is incorrectly set to the first node in the collection (node1) instead of the actual node being dragged from.

Environment

• Syncfusion Version: 31.1.20 and 31.1.21

• Framework: .NET 9, Blazor Server (@rendermode InteractiveServer)

• Browser: Chrome

Steps to Reproduce

1. Create a Blazor Server page with SfDiagramComponent

2. Add two initial nodes (node1, node2) to the diagram

3. Add a third node (node3) dynamically using "Add Node" button

4. Hover over node3 to make its ports visible

5. Drag from any port on node3 to create a new connector

Expected Behavior

The connector should have:

• SourceID: "node3"

• SourcePortID: "node3_portX" (where X is the port dragged from)

Actual Behavior

The connector incorrectly has:

• SourceID: "node1" (always defaults to first node)

• SourcePortID: "node1_portX"

Evidence from Logs

Mouse entered node: node3 // User hovers over node3

🚀 Source Node ID: node1 // BUG: Should be node3!

🚀 Dragging from Node: node1 at X=418, Y=160 // Wrong coordinates

🔥 Connector SourceID: node1 // BUG: Should be node3!

🔥 Source Node 'node1' found at position: X=418, Y=160 // node3 is at X=563, Y=352

Additional Observations

• The issue only occurs with dynamically added nodes

• Initial nodes (node1, node2) work correctly when dragging between them

• The OnDragStart event is never triggered when dragging from dynamically added node ports

• Target node detection works correctly - the issue is specifically with source node detection


Impact

This prevents users from creating accurate diagram connections when working with dynamically generated content, making the component unusable for scenarios requiring runtime node creation with connector functionality.

Workaround

None found - the issue appears to be in the core connector source detection logic.


HOW TO REPEAT

Create Blazor Project (I use Visual Studio 2026 Insights) add the attached Home.razor page then run the project. Add node 1, add node 2, drag connector between node 2 to node 1. Then add node 3 and start connector drag on node 3. Notice the actual drag will start on node 2. Also in events the start node ID will be wrong. If you add additional nodes and additional connectors they will all have the wrong start node ID. 


Attachment: Home_5917dd67.zip

3 Replies

JJ Jawin John Syncfusion Team September 30, 2025 01:35 PM UTC

Hi ,


We were able to reproduce the reported issue. We are currently validating the behavior and will share additional details as soon as possible.


Best Regards,

Jawin



IT IssacImmanuvel ThomasJebaraj Syncfusion Team October 3, 2025 11:37 AM UTC

Hi Scott Peal,

We have confirmed that the reported issue is a bug and have logged a defect report regarding it. We will fix the issue and include the fix in our upcoming scheduled NuGet release, which is expected to be rolled out on "October 21, 2025". We appreciate your patience until then.

Meanwhile, you can track the status of the bug at the following link:

Incorrect SourcePortID Set During Connector Draw from Port When Events Are Hooked in Blazor | Feedback Portal


Regards,

Issac Immanuvel T








RS Ramya Subramani Syncfusion Team October 10, 2025 10:32 AM UTC

Hi Scott Peal,

   

We have reviewed the sample you attached and identified the root cause of the issue. The IDs used in the port configuration include underscores, which is not recommended. This applies not only to ports but to all diagram elements—IDs should not contain underscores or spaces. Once the IDs are corrected, connectors will be drawn from the expected ports as intended.

For your reference, I’ve included the UG documentation link below that outlines the correct usage:


Ug link - https://blazor.syncfusion.com/documentation/diagram/ports/ports


If you have any further questions or need assistance, please feel free to reach out.


Best Regards,

Ramya



Loader.
Up arrow icon