We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Prevent diagram from auto-focusing

Thread ID:





145938 Jul 15,2019 09:56 AM UTC Jul 18,2019 12:14 PM UTC React - EJ 2 3
Tags: Diagram
Asked On July 15, 2019 09:56 AM UTC


I have a problem with the diagram. Each time I interact with it it, there is a focus on the diagram, and it makes the whole page scroll to it which is annoying. I know the culprit is in the file :
node_modules/syncfusion/ej2-diagrams/src/diagram/interaction/event-handlers.js line 543:
if (!this.isForeignObject(evt.target) && this.isMouseDown) {
document.getElementById(this.diagram.element.id + 'content').focus();

"this.diagram.element.id" here is the whole diagram.    

Is there a way to disable this autofocus? Thank you for your answer.

Ramya Thirugnanam [Syncfusion]
Replied On July 16, 2019 12:42 PM UTC

Hi Peter,  
When we click anywhere on diagram, the diagram gets focused and it is the default behavior of our diagram control. Could you please confirm us an scrolling behavior which you expect at your end? So that we can validate and provide a better solution.  
Ramya T 

Replied On July 17, 2019 09:13 AM UTC

Yes so as you can see here https://stackblitz.com/edit/react-66kxbp if you zoom the window to 300% for example and you select the node on the diagram, the page will automatically scroll so that the top of  the page will be at the beginning of the diagram

Ramya Thirugnanam [Syncfusion]
Replied On July 18, 2019 12:14 PM UTC

Hi Peter,  
As mentioned earlier, when we click on the diagram, the diagram gets focused and it is a default behavior of our diagram control. If we prevent a diagram focus, then a diagram interaction could not be performed. So, if you need to prevent focus and scrolling, you can design a static diagram by setting DiagramConstraints as None as shown in below code example.  
Code example:  
function App() {  
  return (   
      <DiagramComponent id="diagram"   
        //set diagramconstraints as none for static diagram  
        constraints = {DiagramConstraints.None}  
Ramya T 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon