Prevent diagram from auto-focusing

[peter]

Hello,

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]

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.  

 

Regards,  

Ramya T 

[peter]

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]

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}  

         />  

    </div>  

 

  );  

}  

 

 

Regards, 

Ramya T