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:
@@ -377,10 +377,31 @@ export const SortableTabsStrip: React.FC<SortableTabsStripProps> = ({
|
|||||||
? 'flex-none basis-auto'
|
? 'flex-none basis-auto'
|
||||||
: (isMobile ? 'flex-1 basis-0 min-w-0' : 'flex-1 basis-0 min-w-fit'))
|
: (isMobile ? 'flex-1 basis-0 min-w-0' : 'flex-1 basis-0 min-w-fit'))
|
||||||
: 'min-w-0 flex-1 basis-0';
|
: '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 (
|
return (
|
||||||
<Wrapper key={item.id} id={item.id} className={wrapperClassName}>
|
<Wrapper key={item.id} id={item.id} className={wrapperClassName}>
|
||||||
<div
|
<div
|
||||||
ref={(element) => setTabRef(item.id, element)}
|
ref={(element) => setTabRef(item.id, element)}
|
||||||
|
onAuxClick={handleAuxClick}
|
||||||
|
onMouseDown={handleMouseDown}
|
||||||
className={cn(
|
className={cn(
|
||||||
'group flex h-full min-w-0 flex-nowrap items-center',
|
'group flex h-full min-w-0 flex-nowrap items-center',
|
||||||
(isScrollable || useIntrinsicPillSizing)
|
(isScrollable || useIntrinsicPillSizing)
|
||||||
|
|||||||
Reference in New Issue
Block a user