From 226820999813c2ef6c9fe2bc4407528f9fbf0a53 Mon Sep 17 00:00:00 2001
From: Noah Petherbridge <root@kirsle.net>
Date: Thu, 27 Mar 2025 22:21:00 -0700
Subject: [PATCH] Chrome drag/drop bug: skip DOM update on dragenter

On Chromium, if the DOM is updated during a dragenter event (e.g. to
display the drop zone div), the browser will immediately fire dragleave
as well which leads to a rapid flickering effect.
---
 src/App.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index b735fa0..4250186 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3654,7 +3654,11 @@ export default {
             $body.addEventListener("dragenter", (e) => {
                 e.preventDefault();
                 e.stopPropagation();
-                $dropArea.classList.add("is-active");
+
+                // Chrome bug: do not manipulate the DOM on drag start or it'll fire dragleave right away.
+                window.requestAnimationFrame(() => {
+                    $dropArea.classList.add("is-active");
+                });
             });
             $body.addEventListener("dragover", (e) => {
                 e.preventDefault();