One context menu for the whole app.

[bkyf]

Hi Γιάννη,

I cannot find out who to have only one context menu shown at a time. I have multiple right click-able elements many of which are embedded one on the other. Can you suggest a solution, as many context menus appear at the same time now.

Thanks

[johndatserakis]

Yassou Babis,

Hmm, I believe this should work right out of the box.

I've set up a quick codesandbox as an example: https://codesandbox.io/s/naughty-bhabha-zi0gj?file=/src/components/HelloWorld.vue

One thing to point out is that you must use unique elementId values when initializing each vue-simple-context-menu block:

  <vue-simple-context-menu
    :elementId="'myFirstMenu'"
    :options="optionsArray1"
    :ref="'vueSimpleContextMenu1'"
    @option-clicked="optionClicked1"
  />

  <vue-simple-context-menu
    :elementId="'mySecondMenu'"
    :options="optionsArray1"
    :ref="'vueSimpleContextMenu2'"
    @option-clicked="optionClicked2"
  />

As can be seen in the example, these two instances share an options array, but each one has their own instance.

Let me know if I understand your question correctly. Thank you.

[bkyf]

Thanks for the very quick response.

It wasn't really what I was looking for. In your example, you can have two simultaneously open context menus, whereas I was looking for max one at a time. So, if I right click to the left list, a context menu opens; if I then right click on the right list, the previous context menu disappears and a new one on the right list appears -- so only one at a time. Something like the native context menu one gets from a right click. You can only have one at a time.
Not sure if that's possible.

Thanks for your help.

[johndatserakis]

Ahh ok I see, sure that shouldn't be too tough.

You can use the undocumented function built into each vue-simple-context-menu instance, hideContextMenu(). I've updated my example to do this in each handleClick handler. You can check it out: https://codesandbox.io/s/naughty-bhabha-zi0gj?file=/src/components/HelloWorld.vue

You could expand my rudimentary example to a more elegant solution by doing something like looping over all other ref instances except the one that was clicked.

Basically the logic could be - when any item that has a vue-simple-context-menu instance attached is clicked, hide all other vue-simple-context-menu instances.

Please let me know if that clears it up and if I can help further. Thank you.

[johndatserakis]

Closing, will reopen if needed.