drag and drop - Angular Material Mat-Tree dragover event firing unnecessary

Question

I have mat-tree with events attached to for the drag-drop functionality. I have two components ( one for Source Tree and other for Destination Tree). I am dragging item from Source Tree and dropping it on Destination Tree.

The issue is when an item is dragged and dropped, the dropover events keeps firing even when the item has been dropped.

The functionality is working smoothly in Edge browser but not in Chrome. In Chrome, we can see that the dragover event is firing unnecessary.

    <mat-tree-node *matTreeNodeDef="let node; when: hasMicroChild" matTreeNodePadding
                (dragover)="handleDragOver($event, node);" (dragend)="handleDragEnd($event, node);"
                (drop)="handleDrop($event, node);" [ngClass]="getStyle(node)">
                <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.item">
                    <mat-icon class="mat-icon-rtl-mirror">
                        {{TreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                    </mat-icon>
                </button>
                <span class="checklist-leaf-node">
                    <span class="nodeContent">
                        <div *ngIf="node.queryType; else elseBlock">{{node.item}} ({{node.queryType}})</div>
                        <ng-template #elseBlock>{{node.item}}</ng-template>
                    </span>
                </span>
            </mat-tree-node>

question from:https://stackoverflow.com/questions/65879971/angular-material-mat-tree-dragover-event-firing-unnecessary

Answer 1

Waitting for answers