Pop up menu appears outside cytoscape network, even when nothing is clicked

[jonng1000]

Hi, I noticed that my pop up menu appears outside cytoscape network, even when nothing is clicked. May I know how to solve it please?

My code is

<CytoscapeComponent 
              elements={props.elements} 
              style={ {  
                height: sizeHeight + 'px',
                cursor: my_cursor
              } } 
              cy={cy => {
                cy.on('add', 'node', _evt => {
                    cy.layout(layout).run()
                    cy.fit()
                    setCy(cy)
                })
                cy.on('mouseover', 'node', (evt) => {
                  changeCursor('pointer')
                  //makePopper(evt.target)
                });
                cy.on('mouseout', 'node', (evt) => {
                  changeCursor('default')
                });

                var options = {
                  // Customize event to bring up the context menu
                  // Possible options https://js.cytoscape.org/#events/user-input-device-events
                  evtType: 'cxttap',
                  // List of initial menu items
                  // A menu item must have either onClickFunction or submenu or both
                  menuItems: [
                    {
                      content: 'test',
                      selector: 'node',
                      onClickFunction: function (evt) { 
                        console.log(evt.target.data('123'))// The function to be executed on click
                        //console.log('remove element');
                      },
                      show: false
                    },
                    {
                      id: 'test',
                      content: 'test1',
                      selector: 'node',
                      coreAsWell: false,
                      show: true,
                      onClickFunction: function (evt) { 
                        console.log('test')// The function to be executed on click
                        //console.log('remove element');
                      },
                    }
                  ],
                  // css classes that menu items will have
                  menuItemClasses: [
                    // add class names to this list
                  ],
                  // css classes that context menu will have
                  contextMenuClasses: [
                    // add class names to this list
                  ]
                };
                cy.contextMenus(options);
              }}

Thank you

[canbax]

I observed similar things with an angular app before. It goes away after you click or pan, zoom to the canvas. It might hide the context menu items later with an event. For now, you might try emitting the event manually.

[jonng1000]

Thanks, how exactly do I do that? May I get a code sample please?
Sorry, am very very new to javascript :/

[canbax]

Try cy.zoom(cy.zoom()) it will set the zoom level

[jonng1000]

Hi I did that but it didnt work. Any other suggestions?

<CytoscapeComponent 
              elements={props.elements} 
              style={ {  
                height: sizeHeight + 'px',
                cursor: my_cursor
              } } 
              cy={cy => {
                cy.on('add', 'node', _evt => {
                    cy.layout(layout).run()
                    cy.fit()
                    setCy(cy)
                })
                cy.on('mouseover', 'node', (evt) => {
                  changeCursor('pointer')
                  //makePopper(evt.target)
                });
                cy.on('mouseout', 'node', (evt) => {
                  changeCursor('default')
                });

                var options = {
                  // Customize event to bring up the context menu
                  // Possible options https://js.cytoscape.org/#events/user-input-device-events
                  evtType: 'cxttap',
                  // List of initial menu items
                  // A menu item must have either onClickFunction or submenu or both
                  menuItems: [
                    {
                      content: 'test',
                      selector: 'node',
                      onClickFunction: function (evt) { 
                        console.log(evt.target.data('123'))// The function to be executed on click
                        //console.log('remove element');
                      },
                      show: false
                    },
                    {
                      id: 'test',
                      content: 'test1',
                      selector: 'node',
                      coreAsWell: false,
                      show: true,
                      onClickFunction: function (evt) { 
                        console.log('test')// The function to be executed on click
                        //console.log('remove element');
                      },
                    }
                  ],
                  // css classes that menu items will have
                  menuItemClasses: [
                    // add class names to this list
                  ],
                  // css classes that context menu will have
                  contextMenuClasses: [
                    // add class names to this list
                  ]
                };
                cy.contextMenus(options);
               cy.zoom(cy.zoom);
              }}

I included your suggestion at the bottom

[canbax]

@jonng1000 You should not write your application logic code in there. Follow some react.js tutorials, read docs about it. I'm not sure maybe it is because of this. Normal I would have put my JS logic inside componentDidMount

[canbax]

@jonng1000 I tried this.cy.pan(this.cy.pan()); it was working

[jonng1000]

Ok thanks so much for your help! =)