diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts index e6eb16d08..65ead5491 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts @@ -3824,7 +3824,7 @@ describe('dockviewComponent', () => { expect(el.style.width).toBe('256px'); }); - test('that external dnd events do not trigger the top-level center dnd target', () => { + test('that external dnd events do not trigger the top-level center dnd target unless empty', () => { const container = document.createElement('div'); const showDndOverlay = jest.fn().mockReturnValue(true); @@ -3847,7 +3847,7 @@ describe('dockviewComponent', () => { id: 'panel_1', component: 'default', }); - dockview.addPanel({ + const panel2 = dockview.addPanel({ id: 'panel_2', component: 'default', position: { direction: 'right' }, @@ -3956,5 +3956,27 @@ describe('dockviewComponent', () => { // expect not to be called for center expect(showDndOverlay).toBeCalledTimes(4); + + dockview.removePanel(panel1); + dockview.removePanel(panel2); + + // center, but empty + + const eventCenter2 = new KeyboardEvent('dragover'); + Object.defineProperty(eventCenter2, 'clientX', { + get: () => 50, + }); + Object.defineProperty(eventCenter2, 'clientY', { + get: () => 50, + }); + fireEvent(dockview.element, eventCenter2); + + expect(showDndOverlay).toHaveBeenCalledWith({ + nativeEvent: eventTop, + position: 'center', + target: DockviewDropTargets.Edge, + getData: getPanelData, + }); + expect(showDndOverlay).toBeCalledTimes(5); }); }); diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index 5fb066f7e..166755ccb 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/packages/dockview-core/src/dockview/dockviewComponent.ts @@ -260,7 +260,7 @@ export class DockviewComponent } if (this.options.showDndOverlay) { - if (position === 'center') { + if (position === 'center' && this.gridview.length !== 0) { /** * for external events only show the four-corner drag overlays, disable * the center position so that external drag events can fall through to the group