feat: close sortable tabs with middle-click (#1304)

Aligns tab behavior with browsers and editors: pressing the middle mouse
button on any closable tab in SortableTabsStrip closes it without going
through the visible close icon.

- onAuxClick handler triggers onClose when event.button === 1.
- onMouseDown preventDefault on middle button suppresses the browser's
  autoscroll affordance.
- Both handlers no-op when the tab is not closable, keeping non-editor
  tab strips (skills catalog, settings sections, etc.) untouched.
This commit is contained in:
Roberto Bertó
2026-05-18 18:02:27 +03:00
committed by GitHub
parent 9ab90d4f1a
commit 76eef473aa
@@ -377,10 +377,31 @@ export const SortableTabsStrip: React.FC<SortableTabsStripProps> = ({
? 'flex-none basis-auto'
: (isMobile ? 'flex-1 basis-0 min-w-0' : 'flex-1 basis-0 min-w-fit'))
: 'min-w-0 flex-1 basis-0';
const handleAuxClick = closable
? (event: React.MouseEvent<HTMLDivElement>) => {
// Middle-click (button === 1) closes the tab. Matches browser tab behavior.
if (event.button !== 1) {
return;
}
event.preventDefault();
event.stopPropagation();
onClose?.(item.id);
}
: undefined;
const handleMouseDown = closable
? (event: React.MouseEvent<HTMLDivElement>) => {
// Prevent the browser's middle-click autoscroll affordance.
if (event.button === 1) {
event.preventDefault();
}
}
: undefined;
return (
<Wrapper key={item.id} id={item.id} className={wrapperClassName}>
<div
ref={(element) => setTabRef(item.id, element)}
onAuxClick={handleAuxClick}
onMouseDown={handleMouseDown}
className={cn(
'group flex h-full min-w-0 flex-nowrap items-center',
(isScrollable || useIntrinsicPillSizing)