From 5ece4821af29ac4143d85903811b2d6efcddd188 Mon Sep 17 00:00:00 2001
From: Shreyas <CuriousCorrelation@gmail.com>
Date: Tue, 24 Jun 2025 14:28:11 +0530
Subject: [PATCH] fix(desktop): prevent navigation on file drops (#5176)

---
 packages/hoppscotch-selfhost-web/src/main.ts | 81 +++++++++++++++++++-
 1 file changed, 80 insertions(+), 1 deletion(-)

diff --git a/packages/hoppscotch-selfhost-web/src/main.ts b/packages/hoppscotch-selfhost-web/src/main.ts
index 2d28517f..cb236e99 100644
--- a/packages/hoppscotch-selfhost-web/src/main.ts
+++ b/packages/hoppscotch-selfhost-web/src/main.ts
@@ -126,7 +126,86 @@ async function initApp() {
     headerPaddingTop.value = "0px"
     headerPaddingLeft.value = "80px"
 
-    // Add backspace prevention for non-text inputs
+    const ALLOWED_DROP_SELECTORS = [
+      '[draggable="true"]',
+      ".draggable-content",
+      ".draggable-handle",
+      ".sortable-ghost",
+      ".sortable-drag",
+      ".sortable-chosen",
+      ".vue-draggable",
+
+      'input[type="file"]',
+      'label[for*="attachment"]',
+      ".file-chips-container",
+      ".file-chips-wrapper",
+
+      ".cm-editor",
+      ".cm-content",
+      ".cm-scroller",
+      ".ace_editor",
+
+      "[data-allow-drop]",
+      ".drop-zone",
+
+      "[ondrop]",
+      "[data-drop-handler]",
+    ].join(", ")
+
+    const isAllowedDropTarget = (target: EventTarget | null): boolean => {
+      if (!target || !(target instanceof HTMLElement)) {
+        return false
+      }
+
+      if (target.closest(ALLOWED_DROP_SELECTORS)) {
+        return true
+      }
+
+      const element = target as any
+      if (element._vei?.onDrop || element.__vueListeners__?.drop) {
+        return true
+      }
+
+      return false
+    }
+
+    document.addEventListener(
+      "drop",
+      (e) => {
+        if (!isAllowedDropTarget(e.target)) {
+          e.preventDefault()
+          e.stopPropagation()
+        }
+      },
+      false
+    )
+
+    document.addEventListener(
+      "dragover",
+      (e) => {
+        e.preventDefault()
+      },
+      false
+    )
+
+    document.addEventListener(
+      "dragstart",
+      (e) => {
+        if (!e.target || !(e.target instanceof HTMLElement)) {
+          return
+        }
+
+        const target = e.target as HTMLElement
+        if (
+          !target.draggable &&
+          !target.closest('[draggable="true"], .draggable-content')
+        ) {
+          e.preventDefault()
+        }
+      },
+      false
+    )
+
     window.addEventListener(
       "keydown",
       function (e) {