dndDragover Event Not Working Consistently in Firefox

[keenan-paige]

Describe the bug
The .dndDragover class is not removing 100% of the time on drag leave in Firefox browser when using the dndDragover event. Note: This doesn't happen every time, but it can typically be reproduced after some amount of dragging a drag field over a drop zone in Firefox.

Steps to reproduce the behavior:

1. Go to Firefox browser
2. Drag a drop field over the drop zone
3. Without dropping the drop field into the drop zone, hover the drop field on and out of the drop zone
4. Note that sometimes dndDragover class is not removed even when dragging over drop zone has stopped. If not noticing issue, repeat steps 2 - 3 until issue reproduces.

Expected behavior
The dndDragover class should remove on drag leave consistently in Firefox.

Desktop (please complete the following information):

• Device: Mac
• Browser Firefox
• Version 95.0.2

Additional context
As mentioned, this issue is not reproducible 100% of the time. I think in normal circumstances, it does remove the class as expected. However, occasionally the class does persist even when the drop zone is no longer being dragged over. We have a work around to call an additional dragleave event that serves to remove the class when dragging is complete.

[todamach]

Hi,

I have a similar issue, so I decided not to create a new one. In my case, I'm not using .dndDragover, but dndplaceholderref.

Desktop (please complete the following information):

• Device: Windows
• Browser Chrome
• Version 97.0.4692.71
• Angular v13

In my case, I have a 15x15 game board that I'm trying to drop element to. I have a simple dndPlaceholderRef like this on every square:

<div dndPlaceholderRef>
   <div *ngIf="dndOnBoardAllowed(i, j)" class="board-tile">
</div>

I've made a small gif of the issue:

https://ibb.co/cFt871z

Also, here in the dev tools, you can see that the element with dndPlaceholderRef was not removed from the DOM:

https://ibb.co/8Ym25xj

Is there something that I'm doing wrong? If so, how could I resolve it?
Or is it the issue of the library? If so, is there a plan and timeline for fixing it, or should I start looking somewhere else?

@keenan-paige sorry for hijacking this, but I feel like the issue is similar enough, and might even be the same issue so additional information I've provided could help to find the cause. By the way, maybe you've found a way to resolve this on your side?

Thank you.

[keenan-paige]

@todamach They you for providing the additional use case and context - it does seem like a similar issue to me. We have not found a way around this via the library on our end yet.

[reppners]

@todamach Thx for reporting and putting in the effort! I'm not too sure your issue is related. Can you try to remove the *ngIf from the placeholder and see if that has an effect?

Currently I think this issue may be reduced by having more cleanup logic but I'm afraid there is no 100% fix when the underlying event that is used for cleaning up the dragover is not emitted by the browser.

[MargeKh]

Here’s how I resolved the issue with the placeholder (reported by @todamach) and managed to effectively stop the drag event. I hope this info is helpful!

 elementsVisibility: boolean[] = [];
 this.elementsVisibility = Array(this.elements.length).fill(true);



onDragStart(index: number, event) {
   console.log('onDragStart')
   setDraggableStyle(event, 'content-draggable', '.remove-ondrag');
   this.removeIndex = index;
   this.draggedItem = this.elements.at(index);
   this.elementsVisibility[index] = false;
   event.target.addEventListener('dragend', this.onDragEnd.bind(this));
 }
 onDragEnd(event: DragEvent) {
   console.log('onDragEnd');
   this.resetDragState();
   this.removePlaceholder();
   this.elementsVisibility.fill(true);
   event.target.removeEventListener('dragend', this.onDragEnd.bind(this));
 }
 private removePlaceholder() {
   const placeholder = document.querySelector('.drag-placeholder');
   if (placeholder) {
     placeholder.remove();
     console.log('Placeholder removed');
   }
 }

 private resetDragState() {
   this.removeIndex = null;
   this.draggedItem = null;
 }