vue-draggable blocks child onclick events

[dhallX]

the vue-draggable component is blocking onclick events that are located inside a list element. when I comment out the draggable package my menu click works again. when I insert the draggable works but not the menu.

parent (the onclick event is located in VListItem prop append-icon. inside ListMenu i trigger an onclick on an icon that opens a menu ): ` <VueDraggableNext :list="generalListData" @change="($event) => updateClassifsListChange($event)" ghostClass="ghost" :style="isListItemClicked ? 'cursor: grabbing' : 'cursor: grab'" @choose="() => (isListItemClicked = true)" @unchoose="() => (isListItemClicked = false)" > <VListGroup v-if="generalListData.length > 0" v-for="(classifs, i) in filterGeneralList" :key="i" >

          >
          </VListItem>

          <VCard :key="i" v-show="classifs.value" width="100%" class="pa-1">
            <VTextField
              hide-details="auto"
              density="compact"
              variant="outlined"
              v-model="clsInputText"
            />
            <div class="d-flex mt-2 justify-space-evenly">
              <div class="pr-4">
                <VBtn
                  size="x-small"
                  color="primary"
                  @click="() => addField('cls', classifs.id, dataSets.id, i, null)"
                  >OK</VBtn
                >
              </div>

              <VBtn
                @click="() => closeTextField(i)"
                size="x-small"
                class="text-primary bg-grey-lighten-3"
              >
                Abbrechen
              </VBtn>
            </div>
          </VCard>
        </template>

        <!-- classes-->

        <VListGroup
          v-if="classifs.classes"
          v-for="(clss, j) in classifs.classes"
          :key="j"
        >
          <template v-slot:activator="{ props }">
            <VListItem
              class="bg-blue-grey-lighten-5"
              v-bind="props"
              :title="clss.name"
              :prepend-icon="clss.listOpen ? 'mdi-chevron-up' : 'mdi-chevron-down'"
              :append-icon="
                () =>
                  h(ListMenu, {
                    isGeneralType: true,
                    listItemIndex: { i: i, j: j, k: null },
                    iconType: 'menu',
                    iconColor: 'primary',
                    listType: 'B',
                    fieldId: dataSets.id,
                    targetedId: clss.id,
                    fieldType: 'classItem',
                    colorPicker: false,
                    onShowSelectedAddFields: showSelectedField,
                  })
              "
              @click="() => (clss.listOpen = !clss.listOpen)"
            >
            </VListItem>

            <VCard key="j" v-if="clss" v-show="clss.value" width="100%" class="pa-1">
              <VTextField
                hide-details="auto"
                density="compact"
                variant="outlined"
                v-model="subClassInputText"
              />
              <div class="d-flex mt-2 justify-space-evenly">
                <div class="pr-4">
                  <VBtn
                    size="x-small"
                    color="primary"
                    @click="
                      () => addField('subClass', clss.id ?? '', dataSets.id, i, j)
                    "
                    >OK</VBtn
                  >
                </div>

                <VBtn
                  @click="() => closeSubTextField(i, j)"
                  size="x-small"
                  class="text-primary bg-grey-lighten-3"
                >
                  Abbrechen
                </VBtn>
              </div>
            </VCard>
          </template>

          <!-- subclasses-->

          <VListGroup
            v-if="clss.subclass"
            v-for="(subClss, k) in clss.subclass"
            :key="k"
          >
            <template v-slot:activator="{ props }">
              <VListItem
                :title="subClss.name"
                :append-icon="
                  () =>
                    h(ListMenu, {
                      isGeneralType: true,
                      listItemIndex: { i: i, j: j, k: k },
                      iconType: 'menu',
                      iconColor: 'primary',
                      listType: 'C',
                      fieldId: dataSets.id,
                      targetedId: subClss.id,
                      fieldType: 'subclass',
                      colorPicker: false,
                      onShowSelectedAddFields: showSelectedField,
                    })
                "
              >
              </VListItem>
            </template>
          </VListGroup>
        </VListGroup>
      </VListGroup>
     </VueDraggableNext> `
     
     `
     <script lang="ts">

import { defineComponent, PropType } from 'vue'; import { useAdminStore } from '~~/store'; import { v4 as uuid } from 'uuid'; import { IndexesIJK } from '../AdminTypes'; export default defineComponent({ name: 'ListMenu', props: { iconColor: { required: false, type: String, default: 'primary', }, iconType: { required: true, type: String as PropType<'menu' | 'add'>, default: 'menu', }, listType: { required: false, type: String as PropType<'A' | 'B' | 'C'>, default: 'A', }, targetedId: { required: false, type: String, }, fieldType: { required: false, type: String as PropType<'classifs' | 'classItem' | 'subclass'>, }, fieldId: { required: true, type: String, }, colorPicker: { required: true, type: Boolean, }, classificationType: { required: false, type: String as PropType<'PRIVATE' | 'LEGAL'>, }, isGeneralType: { require: false, type: Boolean, default: false, }, listItemIndex: { required: false, type: Object as PropType<IndexesIJK>, default: null, }, listOpenValue:{ required: true, type: Boolean, default: false } }, emits: ['showSelectedAddFields', 'updateClassifs', 'listMenuOpen'], setup() { const adminStore = useAdminStore(); return { adminStore }; }, data() { return { addDialogOpen: false, newField: '', listA: [ { title: 'Löschen', value: 1 }, // { title: 'Bearbeiten', value: 2 }, ], listB: [ { title: 'Hinzufügen', value: 1 }, { title: 'Löschen', value: 2 }, // { title: 'Bearbeiten', value: 3 }, ], listC: [{ title: 'Löschen', value: 1 }], }; }, methods: { openFieldOverlay() { this.addDialogOpen = true; },

addItem() {
  const DTO = {
    id: uuid(),
    colorPicker: this.colorPicker,
    color: '',
    name: this.newField,
    fieldTypeClassificationId: this.fieldId,
    type: this.classificationType,
  };

  this.adminStore.addClassifsToFieldType(DTO);
  this.$emit('updateClassifs', { type: 'add', value: DTO });
  this.newField = '';
  this.addDialogOpen = false;
},
listAction(actionType: string) {
  if (actionType === 'Löschen' && this.targetedId && this.fieldType) {
    if (this.fieldType === 'classifs') {
      this.$emit('updateClassifs', {
        type: 'delete',
        value: this.targetedId,
      });
    }
    this.adminStore.deleteFieldType(
      this.fieldId,
      this.listItemIndex.i,
      this.listItemIndex.j,
      this.targetedId,
      this.fieldType,
    );
  } else if (actionType === 'Bearbeiten') {
    // this.$emit('triggerEditMode', true);
  } else {
    if (!this.isGeneralType) {
      this.addItem();
    } else {
      this.$emit('showSelectedAddFields', this.listItemIndex);
    }
  }
},
openListMenu() {
  this.$emit('listMenuOpen', {index: this.listItemIndex.i, listOpen: this.listOpenValue   })

}

}, });

[dhallX]

in addition after further investigation I see that on the ListMenu the props looses thier ref value when i add the draggable component back.

[anish2690]

@dhallX Please provide a reproduction repo

[plumpboy]

Same