From d73e01993d977b4ec148242ad392f13b1189dbb9 Mon Sep 17 00:00:00 2001
From: Abhishek S Lal <abhishek@usebruno.com>
Date: Wed, 1 Apr 2026 21:36:31 +0530
Subject: [PATCH] feat(request-tabs): prevent browser autoscroll on
 middle-button mouse actions (#7443)

Added event handlers to prevent the browser's autoscroll behavior when the middle mouse button is pressed in the ExampleTab and RequestTab components. This improves user experience by avoiding unintended scrolling during tab interactions.
---
 .../src/components/RequestTabs/ExampleTab/index.js     |  9 +++++++++
 .../src/components/RequestTabs/RequestTab/index.js     | 10 ++++++++++
 2 files changed, 19 insertions(+)

diff --git a/packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js b/packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js
index 17210efc3..8536a8d23 100644
--- a/packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/ExampleTab/index.js
@@ -43,6 +43,13 @@ const ExampleTab = ({ tab, collection }) => {
     }
   };
 
+  // Prevent the browser's autoscroll (triggered on middle-button mousedown)
+  const handleMouseDown = (e) => {
+    if (e.button === 1) {
+      e.preventDefault();
+    }
+  };
+
   const handleMouseUp = (e) => {
     if (e.button === 1) {
       e.preventDefault();
@@ -59,6 +66,7 @@ const ExampleTab = ({ tab, collection }) => {
     return (
       <StyledWrapper
         className="flex items-center justify-between tab-container"
+        onMouseDown={handleMouseDown}
         onMouseUp={(e) => {
           if (e.button === 1) {
             e.preventDefault();
@@ -105,6 +113,7 @@ const ExampleTab = ({ tab, collection }) => {
         className={`flex items-center tab-label ${tab.preview ? 'italic' : ''}`}
         onContextMenu={handleRightClick}
         onDoubleClick={() => dispatch(makeTabPermanent({ uid: tab.uid }))}
+        onMouseDown={handleMouseDown}
         onMouseUp={(e) => {
           if (!hasChanges) return handleMouseUp(e);
 
diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
index dd1efc646..38ca44be3 100644
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
@@ -103,6 +103,13 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
     menuDropdownRef.current?.show();
   };
 
+  // Prevent the browser's autoscroll (triggered on middle-button mousedown)
+  const handleMouseDown = (e) => {
+    if (e.button === 1) {
+      e.preventDefault();
+    }
+  };
+
   const handleMouseUp = (e) => {
     if (e.button === 1) {
       e.preventDefault();
@@ -260,6 +267,7 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
     return (
       <StyledWrapper
         className={`flex items-center justify-between tab-container px-2 ${tab.preview ? 'italic' : ''}`}
+        onMouseDown={handleMouseDown}
         onMouseUp={handleMouseUp}
       >
         {showConfirmCollectionClose && tab.type === 'collection-settings' && (
@@ -447,6 +455,7 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
     return (
       <StyledWrapper
         className="flex items-center justify-between tab-container"
+        onMouseDown={handleMouseDown}
         onMouseUp={(e) => {
           if (e.button === 1) {
             e.preventDefault();
@@ -503,6 +512,7 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
         className={`flex items-baseline tab-label ${tab.preview ? 'italic' : ''}`}
         onContextMenu={handleRightClick}
         onDoubleClick={() => dispatch(makeTabPermanent({ uid: tab.uid }))}
+        onMouseDown={handleMouseDown}
         onMouseUp={(e) => {
           if (!hasChanges) return handleMouseUp(e);