diff --git a/packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx b/packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx index 4d52dd18f..46e49184d 100644 --- a/packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx +++ b/packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx @@ -1,4 +1,4 @@ -import { render, screen } from '@testing-library/react'; +import { fireEvent, render, screen } from '@testing-library/react'; import { DockviewDefaultTab } from '../../dockview/defaultTab'; import * as React from 'react'; import { fromPartial } from '@total-typescript/shoehorn'; @@ -57,4 +57,31 @@ describe('defaultTab', () => { const element = await screen.getByTestId('dockview-default-tab'); expect(element.querySelector('.dv-react-tab-close-btn')).toBeTruthy(); }); + + test('that mouseDown on close button prevents panel becoming active', async () => { + const api = fromPartial({ + setActive: jest.fn(), + }); + const containerApi = fromPartial({}); + const params = {}; + + render( + + ); + + const element = await screen.getByTestId('dockview-default-tab'); + const btn = element.querySelector( + '.dv-react-tab-close-btn' + ) as HTMLElement; + + fireEvent.mouseDown(btn); + expect(api.setActive).toBeCalledTimes(0); + + fireEvent.click(element); + expect(api.setActive).toBeCalledTimes(1); + }); }); diff --git a/packages/dockview/src/dockview/defaultTab.tsx b/packages/dockview/src/dockview/defaultTab.tsx index 1faee461c..280ebd7ed 100644 --- a/packages/dockview/src/dockview/defaultTab.tsx +++ b/packages/dockview/src/dockview/defaultTab.tsx @@ -16,14 +16,22 @@ export const DockviewDefaultTab: React.FunctionComponent< }) => { const onClose = React.useCallback( (event: React.MouseEvent) => { - event.stopPropagation(); + event.preventDefault(); api.close(); }, [api] ); + const onMouseDown = React.useCallback((e: React.MouseEvent) => { + e.preventDefault(); + }, []); + const onClick = React.useCallback( (event: React.MouseEvent) => { + if (event.defaultPrevented) { + return; + } + api.setActive(); if (rest.onClick) { @@ -42,7 +50,11 @@ export const DockviewDefaultTab: React.FunctionComponent< > {api.title} {!hideClose && ( -
+
)}