vis-network custom menu is not appearing on right click

Viewed 10

Problem Summary:
We are using vis-network library to show graph visualization. We want to show a custom menu whenever a user right clicks on a node in canvas or presses space key.
We face an issue for limited set of users. On right click, instead of custom menu, browser menu shows up; space key does not show the custom menu either.
Sample code is as below.

Code (in typescript) :

import { Network } from 'vis-network/standalone';
export class GraphNetwork { 
    network: Network
    selectNodeEvent: any

    // network is being created successfully with container, data and options and graph is visible on canvas
    this.network = new Network(container, data, options);
    this.network.on('oncontext', (event) => {
        handleRightClick(event);
    });

    this.network.on('hoverNode', (event) => {
        // some logic for hove node working perfectly
    });

    this.network.on('selectNode', (event) => {
        this.selectNodeEvent = event;
    });

    document.addEventListener('keyup', (event) => {
        if (event.code === 'Space') {
            handleRightClick (this. selectNodeEvent);
        }
    });

    handleRightClick (eventPayload){
    eventPayload.event.preventDefault()
    document.addEventListener('contextmenu', (event) =>
        event.preventDefault()
    );

    const nodeId = this.network.getNodeAtPosition(eventPayload.event.pointer.DOM);
    // based on the nodeId will determine what menu to show from here
                                .
                                .
                                .
                                .   

}

Any help, suggestion or comment will be great. Thanks in advance

0 Answers
Related