From aa5d2826d903cc0b230a55ba86e8c22329c4bc0e Mon Sep 17 00:00:00 2001
From: pavanmanishd <pavanmanishd@gmail.com>
Date: Sat, 21 Mar 2026 11:53:54 +0530
Subject: [PATCH 1/2] [#9699] Close tab on middle-click

Add onMouseDown handler to the tab close button that fires layoutDocker.close()
when mouse button 1 (middle click) is pressed. preventDefault() stops the
browser's auto-scroll cursor from appearing.

This matches the standard UX in Chrome, Firefox, and VS Code where middle-click
on a tab closes it.
---
 web/pgadmin/static/js/helpers/Layout/index.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web/pgadmin/static/js/helpers/Layout/index.jsx b/web/pgadmin/static/js/helpers/Layout/index.jsx
index 9b93cfe8719..e18fc1ed833 100644
--- a/web/pgadmin/static/js/helpers/Layout/index.jsx
+++ b/web/pgadmin/static/js/helpers/Layout/index.jsx
@@ -67,6 +67,8 @@ export function TabTitle({id, closable, defaultInternal}) {
       <span style={{textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap'}} data-visible={layoutDocker.isTabVisible(id)}>{attrs.title}</span>
       {closable && <PgIconButton title={gettext('Close')} icon={<CloseIcon style={{height: '0.7em'}} />} size="xs" noBorder onClick={()=>{
         layoutDocker.close(id);
+      }} onMouseDown={(e)=>{
+        if(e.button === 1) { e.preventDefault(); layoutDocker.close(id); }
       }} style={{margin: '-1px -10px -1px 0'}} />}
     </Box>
   );

From d6d0b2c29c86ed6387c797b655d03118e3ca4e8a Mon Sep 17 00:00:00 2001
From: pavanmanishd <pavanmanishd@gmail.com>
Date: Sun, 22 Mar 2026 14:26:09 +0530
Subject: [PATCH 2/2] [#9699] Close tab on middle-click of tab title

---
 web/pgadmin/static/js/helpers/Layout/index.jsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/web/pgadmin/static/js/helpers/Layout/index.jsx b/web/pgadmin/static/js/helpers/Layout/index.jsx
index e18fc1ed833..585ce2e0cd6 100644
--- a/web/pgadmin/static/js/helpers/Layout/index.jsx
+++ b/web/pgadmin/static/js/helpers/Layout/index.jsx
@@ -45,6 +45,13 @@ export function TabTitle({id, closable, defaultInternal}) {
     layoutDocker.eventBus.fireEvent(LAYOUT_EVENTS.CONTEXT, e, id);
   }, []);
 
+  const onMouseDown = useCallback((e)=>{
+    if(closable && e.button === 1) {
+      e.preventDefault();
+      layoutDocker.close(id);
+    }
+  }, [closable, id, layoutDocker]);
+
   useEffect(()=>{
     const deregister = layoutDocker.eventBus.registerListener(LAYOUT_EVENTS.REFRESH_TITLE, (panelId)=>{
       if(panelId == id) {
@@ -62,13 +69,11 @@ export function TabTitle({id, closable, defaultInternal}) {
   }, []);
 
   return (
-    <Box display="flex" alignItems="center" title={attrs.tooltip} onContextMenu={onContextMenu} width="100%">
+    <Box display="flex" alignItems="center" title={attrs.tooltip} onContextMenu={onContextMenu} onMouseDown={onMouseDown} width="100%">
       {attrs.icon && <span className={`dock-tab-icon ${attrs.icon}`}></span>}
       <span style={{textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap'}} data-visible={layoutDocker.isTabVisible(id)}>{attrs.title}</span>
       {closable && <PgIconButton title={gettext('Close')} icon={<CloseIcon style={{height: '0.7em'}} />} size="xs" noBorder onClick={()=>{
         layoutDocker.close(id);
-      }} onMouseDown={(e)=>{
-        if(e.button === 1) { e.preventDefault(); layoutDocker.close(id); }
       }} style={{margin: '-1px -10px -1px 0'}} />}
     </Box>
   );