When I use @contextMenu, sometimes drag-select-option does not work and cannot be selected

[thugstools123]

When I use @contextMenu, sometimes drag-select-option does not work and cannot be selected ` <drag-select-option v-for="item in dbnamelist" :value="item" :key="item" @contextmenu="rightClick($event, item)" @dblclick="handleDbClickList(item)" @click="handleOneClick(item)" v-contextmenu:contextmenu

` Does it conflict with other click interactions？

[credred]

I'm sorry to reply to you for so long. Have you solved this problem?

[Jaaahn]

I seem to have the same issue. The drag-select works smooth like butter, but as soon as I add the @contextmenu, selecting still works but is very laggy.

But it seems to me, that this is not a context menu event problem, but rather a problem of vue-drag-select not coping well with having event listeners on its children.

This lags when draging:

<!-- In FileGallery.vue (parent) -->
<drag-select id="fileListContainer" :class="[displayStyle]" :modelValue="modelValue" @update:modelValue="$emit('update:modelValue', $event)" :multiple="true">
  <drag-select-option v-for="image in chunkedImages" :value="image.image_id" :key="image.image_id">
    <FileThumbnail :selected="modelValue.includes(image.image_id)" :image="image" :displayStyle="displayStyle" :key="image" @myCustomEvent="openContextMenu($event, image)" />
  </drag-select-option>
</drag-select>
<!-- (Notice the @myCustomEvent listener, that gets triggered by code inside FileThumbnail.vue -->

<!-- In FileThumbnail.vue -->
<hy-section class="fileThumbnail" :class="[{ selected }, displayStyle]">
  <img :src="image.thumbnail" alt="" ref="image" />
</hy-section>

While this works smoothly:

<!-- In FileGallery.vue (parent) -->
<drag-select id="fileListContainer" :class="[displayStyle]" :modelValue="modelValue" @update:modelValue="$emit('update:modelValue', $event)" :multiple="true">
  <drag-select-option v-for="image in chunkedImages" :value="image.image_id" :key="image.image_id">
    <FileThumbnail :selected="modelValue.includes(image.image_id)" :image="image" :displayStyle="displayStyle" :key="image" />
  </drag-select-option>
</drag-select>

<!-- In FileThumbnail.vue -->
<hy-section class="fileThumbnail" :class="[{ selected }, displayStyle]">
  <img :src="image.thumbnail" alt="" ref="image" />
</hy-section>

My solution

For me, just changing the event listener in the parent component from @myCustomEvent="openContextMenu($event, image) to @myCustomEvent="openContextMenu" fixes the issue.

So I assume this is a problem with $event?

[credred]

I seem to have the same issue. The drag-select works smooth like butter, but as soon as I add the @contextmenu, selecting still works but is very laggy.

But it seems to me, that this is not a context menu event problem, but rather a problem of vue-drag-select not coping well with having event listeners on its children.

This lags when draging:

<!-- In FileGallery.vue (parent) -->
<drag-select id="fileListContainer" :class="[displayStyle]" :modelValue="modelValue" @update:modelValue="$emit('update:modelValue', $event)" :multiple="true">
  <drag-select-option v-for="image in chunkedImages" :value="image.image_id" :key="image.image_id">
    <FileThumbnail :selected="modelValue.includes(image.image_id)" :image="image" :displayStyle="displayStyle" :key="image" @myCustomEvent="openContextMenu($event, image)" />
  </drag-select-option>
</drag-select>
<!-- (Notice the @myCustomEvent listener, that gets triggered by code inside FileThumbnail.vue -->

<!-- In FileThumbnail.vue -->
<hy-section class="fileThumbnail" :class="[{ selected }, displayStyle]">
  <img :src="image.thumbnail" alt="" ref="image" />
</hy-section>

While this works smoothly:

<!-- In FileGallery.vue (parent) -->
<drag-select id="fileListContainer" :class="[displayStyle]" :modelValue="modelValue" @update:modelValue="$emit('update:modelValue', $event)" :multiple="true">
  <drag-select-option v-for="image in chunkedImages" :value="image.image_id" :key="image.image_id">
    <FileThumbnail :selected="modelValue.includes(image.image_id)" :image="image" :displayStyle="displayStyle" :key="image" />
  </drag-select-option>
</drag-select>

<!-- In FileThumbnail.vue -->
<hy-section class="fileThumbnail" :class="[{ selected }, displayStyle]">
  <img :src="image.thumbnail" alt="" ref="image" />
</hy-section>

My solution

For me, just changing the event listener in the parent component from @myCustomEvent="openContextMenu($event, image) to @myCustomEvent="openContextMenu" fixes the issue.

So I assume this is a problem with $event?

I don’t know how laggy performs. Can you give a reproduction link, such as:: https://stackblitz.com/edit/vue-drag-select-contextmenu?file=src%2FApp.vue

However, I found that I can't right-click and select, which is a problem.

[Jaaahn]

I'm afraid I was not able to reproduce this phenomenon outside of my electron application. I will update you, if I figure out a reliable reproduction method.

However, I found that I can't right-click and select, which is a problem.

However, on my quest to create a reproduction link, I was able to implement right-clicking while preserving the functionality to select elements. You may find it here: https://stackblitz.com/edit/vue-drag-select-contextmenu-f76sa4?file=src%2Fcomponents%2FItem.vue

[credred]

I'm afraid I was not able to reproduce this phenomenon outside of my electron application. I will update you, if I figure out a reliable reproduction method.

However, I found that I can't right-click and select, which is a problem.

However, on my quest to create a reproduction link, I was able to implement right-clicking while preserving the functionality to select elements. You may find it here: https://stackblitz.com/edit/vue-drag-select-contextmenu-f76sa4?file=src%2Fcomponents%2FItem.vue

In your example, I suggest setting the width and height of the Item component to 100%, and setting @contextmenu.prevent in vue-drag-select.

Below is the modified example, may this help you?

https://stackblitz.com/edit/vue-drag-select-contextmenu-ysl7vr?file=src%2FApp.vue,src%2Fcomponents%2FItem.vue