From 8efb39a7235892258d407f0945487c838e33cf07 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 20 Sep 2022 16:16:15 -0400
Subject: [PATCH] Keep track of drag targets, avoids flickering and performance
 issues

---
 .../History/CurrentHistory/HistoryPanel.vue        | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index fb116da9cd5..1c983117910 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -30,7 +30,8 @@
                 <section
                     class="history-layout d-flex flex-column w-100"
                     @drop.prevent="onDrop"
-                    @dragover.prevent="onDragOver"
+                    @dragenter.prevent="onDragEnter"
+                    @dragover.prevent
                     @dragleave.prevent="onDragLeave">
                     <slot name="navigation" :history="history" />
                     <HistoryFilters
@@ -323,12 +324,15 @@ export default {
             this.highlights = {};
             this.highlightsKey = null;
         },
-        onDragLeave() {
-            this.showDropZone = false;
-        },
-        onDragOver() {
+        onDragEnter(e) {
+            this.dragTarget = e.target;
             this.showDropZone = true;
         },
+        onDragLeave(e) {
+            if (this.dragTarget == e.target) {
+                this.showDropZone = false;
+            }
+        },
         onDrop(evt) {
             this.showDropZone = false;
             const data = JSON.parse(evt.dataTransfer.getData("text"))[0];