Merge pull request #331 from mathuo/330-preventdefault-on-dockviewdefaulttab-close-btn

bug: preventDefault on close btn mouseDown

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<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);
+    });
 });

packages/dockview/src/dockview/defaultTab.tsx

@@ -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>
             )}