diff --git a/packages/dockview-core/src/dockview/components/tab/defaultTab.ts b/packages/dockview-core/src/dockview/components/tab/defaultTab.ts index 80c30be5d..205e4e562 100644 --- a/packages/dockview-core/src/dockview/components/tab/defaultTab.ts +++ b/packages/dockview-core/src/dockview/components/tab/defaultTab.ts @@ -29,12 +29,6 @@ export class DefaultTab extends CompositeDisposable implements ITabRenderer { this._element.appendChild(this._content); this._element.appendChild(this.action); - this.addDisposables( - addDisposableListener(this.action, 'pointerdown', (ev) => { - ev.preventDefault(); - }) - ); - this.render(); } diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts index d3bd0568b..f697c4083 100644 --- a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts +++ b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts @@ -314,6 +314,10 @@ export class TabsContainer this._onTabDragStart.fire({ nativeEvent: event, panel }); }), tab.onChanged((event) => { + if (event.defaultPrevented) { + return; + } + const isFloatingGroupsEnabled = !this.accessor.options.disableFloatingGroups; @@ -342,14 +346,15 @@ export class TabsContainer return; } - const isLeftClick = event.button === 0; - - if (!isLeftClick || event.defaultPrevented) { - return; - } - - if (this.group.activePanel !== panel) { - this.group.model.openPanel(panel); + switch (event.button) { + case 0: // left click or touch + if (this.group.activePanel !== panel) { + this.group.model.openPanel(panel); + } + break; + case 1: // middle click + panel.api.close(); + break; } }), tab.onDrop((event) => { diff --git a/packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx b/packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx index 427e9650e..93da0a000 100644 --- a/packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx +++ b/packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx @@ -10,7 +10,9 @@ import { Disposable } from 'dockview-core/dist/cjs/lifecycle'; describe('defaultTab', () => { test('has close button by default', async () => { const api = fromPartial({ - onDidTitleChange: jest.fn().mockImplementation(() => Disposable.NONE), + onDidTitleChange: jest + .fn() + .mockImplementation(() => Disposable.NONE), }); const containerApi = fromPartial({}); const params = {}; @@ -30,7 +32,9 @@ describe('defaultTab', () => { test('that title is displayed', async () => { const api = fromPartial({ title: 'test_title', - onDidTitleChange: jest.fn().mockImplementation(() => Disposable.NONE), + onDidTitleChange: jest + .fn() + .mockImplementation(() => Disposable.NONE), }); const containerApi = fromPartial({}); const params = {}; @@ -84,7 +88,9 @@ describe('defaultTab', () => { test('has no close button when hideClose=true', async () => { const api = fromPartial({ - onDidTitleChange: jest.fn().mockImplementation(() => Disposable.NONE), + onDidTitleChange: jest + .fn() + .mockImplementation(() => Disposable.NONE), }); const containerApi = fromPartial({}); const params = {}; @@ -105,7 +111,9 @@ describe('defaultTab', () => { test('that settings closeActionOverride skips api.close()', async () => { const api = fromPartial({ close: jest.fn(), - onDidTitleChange: jest.fn().mockImplementation(() => Disposable.NONE), + onDidTitleChange: jest + .fn() + .mockImplementation(() => Disposable.NONE), }); const containerApi = fromPartial({}); const params = {}; @@ -134,7 +142,9 @@ describe('defaultTab', () => { test('that clicking close calls api.close()', async () => { const api = fromPartial({ close: jest.fn(), - onDidTitleChange: jest.fn().mockImplementation(() => Disposable.NONE), + onDidTitleChange: jest + .fn() + .mockImplementation(() => Disposable.NONE), }); const containerApi = fromPartial({}); const params = {}; @@ -158,7 +168,9 @@ describe('defaultTab', () => { test('has close button when hideClose=false', async () => { const api = fromPartial({ - onDidTitleChange: jest.fn().mockImplementation(() => Disposable.NONE), + onDidTitleChange: jest + .fn() + .mockImplementation(() => Disposable.NONE), }); const containerApi = fromPartial({}); const params = {}; @@ -175,32 +187,4 @@ describe('defaultTab', () => { const element = await screen.getByTestId('dockview-dv-default-tab'); expect(element.querySelector('.dv-default-tab-action')).toBeTruthy(); }); - - test('that pointerDown on close button prevents panel becoming active', async () => { - const api = fromPartial({ - setActive: jest.fn(), - onDidTitleChange: jest.fn().mockImplementation(() => Disposable.NONE), - }); - const containerApi = fromPartial({}); - const params = {}; - - render( - - ); - - const element = await screen.getByTestId('dockview-dv-default-tab'); - const btn = element.querySelector( - '.dv-default-tab-action' - ) as HTMLElement; - - fireEvent.pointerDown(btn); - expect(api.setActive).toHaveBeenCalledTimes(0); - - fireEvent.click(element); - expect(api.setActive).toHaveBeenCalledTimes(1); - }); }); diff --git a/packages/dockview/src/dockview/defaultTab.tsx b/packages/dockview/src/dockview/defaultTab.tsx index f1586fa83..d2801f40e 100644 --- a/packages/dockview/src/dockview/defaultTab.tsx +++ b/packages/dockview/src/dockview/defaultTab.tsx @@ -53,26 +53,10 @@ export const DockviewDefaultTab: React.FunctionComponent< e.preventDefault(); }, []); - const onClick = React.useCallback( - (event: React.MouseEvent) => { - if (event.defaultPrevented) { - return; - } - - api.setActive(); - - if (rest.onClick) { - rest.onClick(event); - } - }, - [api, rest.onClick] - ); - return (
{title}