rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-02-13 20:05:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

bug: preventDefault on close btn mouseDown

Browse Source
This commit is contained in:
mathuo 2023-08-29 20:03:11 +01:00
parent 3832222fef
commit e64d96cef7
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
2 changed files with 42 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/dockview/src/__tests__/dockview/defaultTab.spec.tsx
View File

@ -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<DockviewPanelApi>({
setActive: jest.fn(),
});
const containerApi = fromPartial<DockviewApi>({});
const params = {};
render(
<DockviewDefaultTab
api={api}
containerApi={containerApi}
params={params}
/>
);
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);
});
});

16
packages/dockview/src/dockview/defaultTab.tsx
View File

@ -16,14 +16,22 @@ export const DockviewDefaultTab: React.FunctionComponent<
}) => {
const onClose = React.useCallback(
(event: React.MouseEvent<HTMLSpanElement>) => {
event.stopPropagation();
event.preventDefault();
api.close();
},
[api]
);
const onMouseDown = React.useCallback((e: React.MouseEvent) => {
e.preventDefault();
}, []);
const onClick = React.useCallback(
(event: React.MouseEvent<HTMLDivElement>) => {
if (event.defaultPrevented) {
return;
}
api.setActive();
if (rest.onClick) {
@ -42,7 +50,11 @@ export const DockviewDefaultTab: React.FunctionComponent<
>
<span className="dockview-react-tab-title">{api.title}</span>
{!hideClose && (
<div className="dv-react-tab-close-btn" onClick={onClose}>
<div
className="dv-react-tab-close-btn"
onMouseDown={onMouseDown}
onClick={onClose}
>
<CloseButton />
</div>
)}