Embedded Vue-menu onclick handler issue

[DAMisener]

Background:

• We are trying to add a right-click context menu to an existing Vue component (LabelWidthAdd) contained inside a non-Vue VIS-timeline element (groupTemplate): (for more info see https://github.com/visjs/vis-timeline)

• Despite specifics... hopefully this is a newbie problem.
  Any assistance/suggestions would be appreciated.

  Problem:

• @click=... event without .native modifier doesn't respond to a left-click as desired.

  • Oddly enough it does respond to a right-click and the menu closes properly

• @click.native=... does respond to a left-click but doesn't close the menu after the event fires.

  • Conjecture: .native prevents event propagation to higher DOM level which is responsible for collapsing the menu.

• Our naive assumption is that this is not strange VIS/VueMenu interaction but some oversight/knowledge gap on our part.

  Code excerpts:

  (Sorry can't easily post a JSSnippet/Codepen excerpt)

• Embedded VIS group template:

    const options = Object.assign({
      ...
      groupTemplate: (group) => {
        const id = labelId(group);
        const labelAdd = new LabelWithAdd({
          propsData: {
          ...
          },
        });
        ...
      },
      ...

• Where LabelWidthAdd component is defined as:

     const LabelWithAdd = Vue.extend({
       ...
       template: `
         <div :class="labelClass">
           <hsc-menu-style-white>
             <hsc-menu-button-menu  style="z-index:2; position:relative; margin: 50px;" @contextmenu.native.prevent>
             <button>Click Here</button>
               <template slot="contextmenu">
                 ...
                        <hsc-menu-item label="MenuItem 3">
                          <hsc-menu-item label="MenuItem 3a" @click.native="processMenu('3a')"/>
                          <hsc-menu-item label="MenuItem 3b" @click.native="processMenu('3b')"/>
                        </hsc-menu-item>
                      </template>
                    </hsc-menu-button-menu>
                  </hsc-menu-style-white>
              ...
            methods: {
              processMenu(label){
                console.log('ProcessMenu',label);
              }
          },
          ...

[michitaro]

Sorry for the late response. I have missed your post. I doubt that VIS-timeline can't work with vue, but trying snippet in #21 might help you.

Is option groupTemplate described at https://visjs.github.io/vis-timeline/docs/timeline/#Templates ? Can a return value of groupTemplate be a Vue Component?

[DAMisener]

• michitaro> I doubt that VIS-timeline can't work with vue, but trying snippet in #21 might help you. DM> You are correct... with your following suggestion vue+vue_menu+vis-timeline can coexist.

• michitaro> Is option groupTemplate described at https://visjs.github.io/vistimeline/docs/timeline/#Templates? DM> No groupTemplate is something different... from docs

  groupTemplate is a call-back function

  A template function used to generate the contents of the groups. The function is called by the Timeline with a groups data as the first argument and the group element as the second, and must return HTML code, a string or a template as result. When the option groupTemplate is specified, the groups do not need to have a field content. See section Templates for a detailed explanation.

• DM> Revising the above code as follows now closes the menu after triggering:

  
  <hsc-menu-button-menu  ref="contextMenu" ` ... @contextmenu.native.prevent>
  ...

methods: { processMenu(label){ console.log('ProcessMenu',label); this.$refs.contextMenu.$refs.menu.close(true); } ...

**Thank you for all your assistance!!**