[BUG] DropList DragFeedback item's display is not set to "none"

[Jackson-Wheeler]

-- Hello, I believe I found a bug, but I'm not 100% sure I'm not just doing something incorrectly. Hope this is helpful. --

Using core-js@3.32.0, @vue/cli 5.0.8, vue@3.3.4, vuetify@3.3.11, and vue-easy-dnd@2.1.3 Was testing code from the following Demo: https://codesandbox.io/s/droplist-ozs8b?file=/src/App.vue (EDIT: the Demo shows the correct code. However, the code was not correct in my environment (detailed above))

Upon dragging item from the left list, the right list (drop-list) displays the DragFeedback item (class="DragFeedback __feedback") at the bottom of the DropList (see images).

Dragging item from left:

Hovering item over DropList:

After investigating the source code of the demo (linked above), it seems that "vue-easy-dnd@1.2.1" sets "display: none" in the style of the DragFeedback element, such that the extra feedback item does not display at the bottom of the list:

source: ".drop-list[data-v-17e16b58]>*{transition:transform .2s}.feedback[data-v-17e16b58]{display:none}.__drag-image[data-v-17e16b58]{position:fixed;top:-10000px;left:-10000px;will-change:left,top}",

Solution: I went into the source code of vue-easy-dnd@2.1.3 and in the if statement where the DragFeedback element is created and pushed into defaultArr I added style: 'display: none', to the code. This seemingly solved the problem.

if (this.showDragFeedback) {
      defaultArr.push(h(
        script$1,
        {
          style: 'display: none', // INSERTED THIS LINE
          class: '__feedback',
          ref: 'feedback',
          key: 'drag-feedback'
        },
        {
          default: () => this.$slots['feedback']({
            type: this.dragType,
            data: this.dragData
          })[0]
        }
      ));
    }

[nicholaszuccarelli]

I don't see what is a bug here sorry. The behaviour of drag feedback is quite complex because of the different states it can handle. The extra feedback item should correctly not be displayed at the bottom of the list because it is a placeholder - they are in the process of dragging to the list but we don't know which position the user intends to place the element. The item has been rendered invisibly in case they do drag onto the list (especially if you have multiple DropLists on a page)

[Jackson-Wheeler]

Ah yes, that is the correct functionality. However, when I ran the code in my environment, the extra feedback item was displayed by default. The second image (titled "Hovering item over DropList") shows the problem: two feedback items are visible at the same time. (the Demo I linked has the correct functionality)

[nicholaszuccarelli]

Weird. I don't have any issues on my projects. Was your local environment a blank or existing project?

[Jackson-Wheeler]

Here is a Demo of the problem (when dragging from top list to bottom list): https://codesandbox.io/s/dreamy-darwin-vz4qnx?file=/src/components/MyComponent.vue. Hopefully that helps.

[nicholaszuccarelli]

Thanks! :) I've reopened the issue.

[horodynskyi]

Hey, any updates on this issue?