From 98a7aa135711e8044224877d16c07a5a3cb0f0e2 Mon Sep 17 00:00:00 2001
From: Pragadesh-45 <54320162+Pragadesh-45@users.noreply.github.com>
Date: Wed, 11 Sep 2024 11:25:34 +0530
Subject: [PATCH] fix: middle button click to close - SpecialTab and
 RequestTabNotFound tab (#3044)

---
 .../RequestTabs/RequestTab/index.js           | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
index 64d6eebb5c..83f6b72a1d 100644
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
@@ -49,9 +49,10 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
 
   const handleMouseUp = (e) => {
     if (e.button === 1) {
-      e.stopPropagation();
       e.preventDefault();
+      e.stopPropagation();
 
+      // Close the tab
       dispatch(
         closeTabs({
           tabUids: [tab.uid]
@@ -68,7 +69,10 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
   const folder = folderUid ? findItemInCollection(collection, folderUid) : null;
   if (['collection-settings', 'folder-settings', 'variables', 'collection-runner', 'security-settings'].includes(tab.type)) {
     return (
-      <StyledWrapper className="flex items-center justify-between tab-container px-1">
+      <StyledWrapper
+        className="flex items-center justify-between tab-container px-1"
+        onMouseUp={handleMouseUp} // Add middle-click behavior here
+      >
         {tab.type === 'folder-settings' ? (
           <SpecialTab handleCloseClick={handleCloseClick} type={tab.type} tabName={folder?.name} />
         ) : (
@@ -82,7 +86,17 @@ const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUi
 
   if (!item) {
     return (
-      <StyledWrapper className="flex items-center justify-between tab-container px-1">
+      <StyledWrapper
+        className="flex items-center justify-between tab-container px-1"
+        onMouseUp={(e) => {
+          if (e.button === 1) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            dispatch(closeTabs({ tabUids: [tab.uid] }));
+          }
+        }}
+      >
         <RequestTabNotFound handleCloseClick={handleCloseClick} />
       </StyledWrapper>
     );