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

Prevent diagram from auto-focusing


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.

3 Replies

RT Ramya Thirugnanam Syncfusion Team 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 

PE peter 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

RT Ramya Thirugnanam Syncfusion Team 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 

Live Chat Icon For mobile
Up arrow icon