[PR #5175] [MERGED] fix(desktop): prevent navigation on file drops #5092

New issue

Closed

opened 2026-03-17 02:34:22 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 02:34:22 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/5175
Author: @CuriousCorrelation
Created: 6/20/2025
Status: ✅ Merged
Merged: 6/20/2025
Merged by: @CuriousCorrelation

Base: next ← Head: fix-desktop-prevent-webview-navigation

📝 Commits (1)

9399ae6 fix(desktop): prevent navigation on file drops

📊 Changes

1 file changed (+65 additions, -1 deletions)

View changed files

📝 packages/hoppscotch-selfhost-web/src/main.ts (+65 -1)

📄 Description

This adds drag/drop event listeners to prevent Tauri's WebView from opening files when users accidentally drop files outside of intended drop zone.

This fixes that while preserving drag/drop functionality in rest of the inputs like vuedraggable components, file uploads, and code editors (CodeMirror), "browse", etc.

Closes HFE-886
Closes #5089

This occurred because Tauri's WebView inherits standard browser behavior of opening dropped files when they land outside of components designed to handle them.

The current impl uses event listeners that simply skip legitimate drop targets via selectors. The allowed list is made by checking against known patterns from the codebase, things like vuedraggable with .draggable-content and [draggable="true"], file upload inputs using input[type="file"] and .file-chips-container, code editors with .cm-editor and .ace_editor, plus future-proof selectors like [data-allow-drop] and .drop-zone for new components (planned with portable).

How it works

https://github.com/user-attachments/assets/cd91be10-ad6c-466e-8cd9-7e892b7d7878

https://github.com/user-attachments/assets/71d2b8bd-6fdf-43b8-b20d-4892b4a5186e

Notes to reviewers

This change only affects desktop mode when kernelMode === "desktop" and preserves all existing functionality.

Testing should verify that all existing drag/drop functionality works, file uploads in multipart form data components, bulk editor drag/drop in CodeMirror instances, and header/parameter drag reordering.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/5175 **Author:** [@CuriousCorrelation](https://github.com/CuriousCorrelation) **Created:** 6/20/2025 **Status:** ✅ Merged **Merged:** 6/20/2025 **Merged by:** [@CuriousCorrelation](https://github.com/CuriousCorrelation) **Base:** `next` ← **Head:** `fix-desktop-prevent-webview-navigation` --- ### 📝 Commits (1) - [`9399ae6`](https://github.com/hoppscotch/hoppscotch/commit/9399ae6c445e33cde725486c8c2bd75f868ca388) fix(desktop): prevent navigation on file drops ### 📊 Changes **1 file changed** (+65 additions, -1 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-selfhost-web/src/main.ts` (+65 -1) </details> ### 📄 Description This adds drag/drop event listeners to prevent Tauri's WebView from opening files when users accidentally drop files outside of intended drop zone. This fixes that while preserving drag/drop functionality in rest of the inputs like vuedraggable components, file uploads, and code editors (CodeMirror), "browse", etc. Closes HFE-886 Closes #5089 This occurred because Tauri's WebView inherits standard browser behavior of opening dropped files when they land outside of components designed to handle them. The current impl uses event listeners that simply skip legitimate drop targets via selectors. The allowed list is made by checking against known patterns from the codebase, things like vuedraggable with `.draggable-content` and `[draggable="true"]`, file upload inputs using `input[type="file"]` and `.file-chips-container`, code editors with `.cm-editor` and `.ace_editor`, plus future-proof selectors like `[data-allow-drop]` and `.drop-zone` for new components (planned with portable). ### How it works #### Navigation prevention on reordering https://github.com/user-attachments/assets/cd91be10-ad6c-466e-8cd9-7e892b7d7878 #### Navigation prevention on file drop https://github.com/user-attachments/assets/71d2b8bd-6fdf-43b8-b20d-4892b4a5186e ### Notes to reviewers This change only affects desktop mode when `kernelMode === "desktop"` and preserves all existing functionality. Testing should verify that all existing drag/drop functionality works, file uploads in multipart form data components, bulk editor drag/drop in CodeMirror instances, and header/parameter drag reordering. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>