1. Home
  2. Forum
  3. Vue
  4. Context menu events run multi times

Context menu events run multi times

Hi syncfusion!

I use vue-typescript-admin-template in my application (https://github.com/Armour/vue-typescript-admin-template)

I have a tree view with it's context menu that is defined in  tree.vue component as below

<template>
  <div>
    <div class="tree-template-control-wrapper">
      <ejs-treeview
        id="tree"
        ref="tree"
        css-class="custom"
        :allow-editing="editable"
        :fields="nodeFields"
        :node-template="nodeTemplate"
        :node-selected="onNodeSelected"
        :node-clicked="onNodeClicked"
        :node-editing="onNodeEditing"
        :node-edited="onNodeEdited"
      >
        <ejs-contextmenu
          v-if="editable"
          id="contextMenu"
          ref="contextMenu"
          target="#tree"
          :items="menuItems"
          :before-open="onContextMenuBeforeOpen"
          :select="onContextMenuSelect"
        />
      ejs-treeview>
    div>
  div>
template>

Context Menu event handlers in tree.vue component

  onContextMenuBeforeOpen() {
    console.log('onContextMenuBeforeOpen')
  }

  onContextMenuSelect(args: MenuEventArgs) {
    console.log('onContextMenuSelect', args)
  }

Context menu items is created from tree.vue created()

  created() {
    if (!this.editable) {
      return
    }

    // Attach actions to menu items
    this.menuItems = createXmlSchemaNodeMenuItems()
    this.menuItems[0].action = () => this.addNode((parent, nodeId) => createSimpleElementNode(nodeId, parent.id, `node${nodeId}`, false, defaultSimpleElementProperties))
    this.menuItems[1].action = () => this.addNode((parent, nodeId) => createComplexElementNode(nodeId, parent.id, `node${nodeId}`, false, defaultComplexElementProperties))
    this.menuItems[2].action = () => this.addNode((parent, nodeId) => createComplexTypeNode(nodeId, parent.id, `node${nodeId}`, false, defaultComplexTypeProperties))
    this.menuItems[3].action = () => this.addNode((parent, nodeId) => createSimpleTypeNode(nodeId, parent.id, `node${nodeId}`, false, defaultSimpleTypeProperties))
    this.menuItems[4].action = () => this.addNode((parent, nodeId) => createAttributeNode(nodeId, parent.id, `node${nodeId}`, false, defaultAttributeProperties))
    this.menuItems[5].action = () => this.addNode((parent, nodeId) => createGroupNode(nodeId, parent.id, `node${nodeId}`, false, parent.parentId ? defaultChoiceGroupProperties : defaultSequenceGroupProperties))
    this.menuItems[7].action = () => this.renameNode()
    this.menuItems[8].action = () => this.removeNode()
    this.menuItems[9].action = () => this.moveNode(true)
    this.menuItems[10].action = () => this.moveNode(false)
  }

export function createXmlSchemaNodeMenuItems(): IMenuItem[] {
  return [
    {
      id: 'addSimpleElement',
      text: 'Add Simple Element',
      iconCss: 'e-icons e-cm-add-se'
    },
    {
      id: 'addComplexElement',
      text: 'Add Complex Element',
      iconCss: 'e-icons e-cm-add-ce'
    },
    {
      id: 'addComplexType',
      text: 'Add Complex Type',
      iconCss: 'e-icons e-cm-add-ct'
    },
    {
      id: 'addSimpleType',
      text: 'Add Simple Type',
      iconCss: 'e-icons e-cm-add-st'
    },
    {
      id: 'addAttribute',
      text: 'Add Attribute',
      iconCss: 'e-icons e-cm-add-a'
    },
    {
      id: 'addGroup',
      text: 'Add Group',
      iconCss: 'e-icons e-cm-add-g'
    },
    {
      separator: true
    },
    {
      id: 'rename',
      text: 'Rename',
      iconCss: 'e-icons e-cm-rename'
    },
    {
      id: 'remove',
      text: 'Remove',
      iconCss: 'e-icons e-cm-remove'
    },
    {
      id: 'moveUp',
      text: 'Move Up',
      iconCss: 'e-icons e-cm-moveup'
    },
    {
      id: 'moveDown',
      text: 'Move Down',
      iconCss: 'e-icons e-cm-movedown'
    }
  ]
}

The tree.vue component is used in an editor component. Editor component is displayed in tab items as below


and


Note: we have 3 Edit Xml Schema tab contain 3 editor component (3 tree component). All components is keep alive in router.

When open the context menu, context menu before open event only run one time


But when click on a menu item in context menu, context menu select event run 3 times. If i have n Edit Xml Schema tab, select event raise n times.
This unexpected behavior leads to problem if i select add menu item, a new node will be added to 3 tree view in 3 tree component


How can i resolve this problem




1 Reply
MK Mohan Kumar Ramasamy Syncfusion Team August 12, 2020 07:45 AM UTC

Hi Kha Chan, 
 
We have checked your reported query, we have unable to reproduce the reported issue in our end. For you reference, we have prepared a sample based on this, please refer below link. 
 
 
If you are still facing the issue, kindly share the below details. 
 
·         If possible, try to reproduce the reported issue in provided sample or share the issue reproducible sample 
 
Please provide the above requested information, based on that we will check and provide you a better solution quickly. 
  
Regards, 
Mohankumar R 


Loader.
Up arrow icon