Uncaught SyntaxError Failed to execute closest on Element

i'm using .NET 8 with Syncfusion Blazor version 29.2.9, and I'm encountering a JavaScript error when hovering over a node or connector in the SfDiagramComponent

🐞 Issue:

When I add tooltips to diagram nodes or connectors, the browser console shows the following error when hovering:

Uncaught SyntaxError: Failed to execute 'closest' on 'Element': '#395_514_groupElement' is not a valid selector.



2 Replies

JJ Jawin John Syncfusion Team June 19, 2025 06:16 AM UTC

Hi,
 

We suspect that the Node's ID contains special characters like underscore or it started with any numbers. As per our guidance, the Node’s Id should not start with numbers or special characters and should not contain characters such as underscores (_) or spaces. If this guideline is not followed, exceptions like the one you've encountered may occur. This recommendation is also documented in our user guide—please refer to it for more details.

 

UG link - https://blazor.syncfusion.com/documentation/diagram/nodes/nodes

 

Let us know if you need help updating your node or connector IDs to avoid this issue.

Best Regards,
Jawin



PK Perry Katy July 10, 2025 03:43 AM UTC

This error typically arises when the ID of the element you're trying to target with closest() contains characters that are not valid in a CSS selector, or if it's being interpreted incorrectly. In your case, the problematic part Crazy Cattle 3D appears to be the ID itself, which likely contains underscores or other characters that, although valid in an HTML ID, may need to be escaped or handled differently when used within a CSS selector string.


Loader.
Up arrow icon