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)"
>


<VListItem
class="bg-blue-grey-lighten-4"
v-bind="props"
:title="classifs.name"
:prepend-icon="
() => h(ListMenuIcons, { listOpen: Boolean(classifs.listOpen) })
"
:append-icon="
() =>
h(ListMenu, {
listItemIndex: { i: i, j: null, k: null },
isGeneralType: true,
iconType: 'menu',
iconColor: 'primary',
listType: 'B',
fieldId: dataSets.id,
targetedId: classifs.id,
fieldType: 'classifs',
colorPicker: false,
onShowSelectedAddFields: showSelectedField,
onOpenListMenuOpen: openListMenuOpen,
listOpenValue: classifs.listOpen,
})
"

          >
          </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,
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   })

}

},
});
</script>

Füge ein neues Feld hinzu

OK

      <VBtn
        size="small"
        class="text-primary bg-grey-lighten-3"
        @click="addDialogOpen = false"
        >Abbrechen</VBtn
      >
    </div>
  </VCard>
</VOverlay>

`

[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