diff --git a/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts b/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts index 11388bed3..2cd466626 100644 --- a/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts @@ -894,137 +894,4 @@ describe('tabsContainer', () => { expect(mockVoidContainer.updateDragAndDropState).toHaveBeenCalledTimes(1); }); }); - - describe('tab overflow dropdown', () => { - test('close button clicks in dropdown should not trigger tab activation', () => { - const mockPopupService = { - openPopover: jest.fn(), - close: jest.fn(), - }; - - const accessor = fromPartial({ - onDidAddPanel: jest.fn(), - onDidRemovePanel: jest.fn(), - options: {}, - onDidOptionsChange: jest.fn(), - popupService: mockPopupService, - }); - - const mockClose = jest.fn(); - const mockSetActive = jest.fn(); - const mockScrollIntoView = jest.fn(); - - const mockPanel = fromPartial({ - id: 'test-panel', - api: { - isActive: false, - close: mockClose, - setActive: mockSetActive, - }, - view: { - createTabRenderer: jest.fn().mockReturnValue({ - element: (() => { - const tabElement = document.createElement('div'); - tabElement.className = 'dv-default-tab'; - - const content = document.createElement('div'); - content.className = 'dv-default-tab-content'; - content.textContent = 'Test Tab'; - - const action = document.createElement('div'); - action.className = 'dv-default-tab-action'; - const closeButton = document.createElement('div'); - action.appendChild(closeButton); - - tabElement.appendChild(content); - tabElement.appendChild(action); - - return tabElement; - })(), - }), - }, - }); - - const mockTab = { - panel: mockPanel, - element: { - scrollIntoView: mockScrollIntoView, - }, - }; - - const mockTabs = { - tabs: [mockTab], - onDrop: jest.fn(), - onTabDragStart: jest.fn(), - onWillShowOverlay: jest.fn(), - onOverflowTabsChange: jest.fn(), - size: 1, - panels: ['test-panel'], - isActive: jest.fn(), - indexOf: jest.fn(), - delete: jest.fn(), - setActivePanel: jest.fn(), - openPanel: jest.fn(), - showTabsOverflowControl: true, - updateDragAndDropState: jest.fn(), - element: document.createElement('div'), - dispose: jest.fn(), - }; - - const groupPanel = fromPartial({ - id: 'testgroupid', - panels: [mockPanel], - model: fromPartial({}), - }); - - const cut = new TabsContainer(accessor, groupPanel); - (cut as any).tabs = mockTabs; - - // Simulate overflow tabs - (cut as any).toggleDropdown({ tabs: ['test-panel'], reset: false }); - - // Find the dropdown trigger and click it - const dropdownTrigger = cut.element.querySelector('.dv-tabs-overflow-dropdown-root'); - expect(dropdownTrigger).toBeTruthy(); - - // Simulate clicking the dropdown trigger - fireEvent.click(dropdownTrigger!); - - // Verify popup was opened - expect(mockPopupService.openPopover).toHaveBeenCalled(); - - // Get the popover content - const popoverContent = mockPopupService.openPopover.mock.calls[0][0]; - expect(popoverContent).toBeTruthy(); - - // Find the tab wrapper in the popover - const tabWrapper = popoverContent.querySelector('.dv-tab'); - expect(tabWrapper).toBeTruthy(); - - // Find the close button in the popover - const closeButton = tabWrapper!.querySelector('.dv-default-tab-action'); - expect(closeButton).toBeTruthy(); - - // Simulate clicking the close button - fireEvent.pointerDown(closeButton!, { - bubbles: true, - }); - - // Verify that tab activation methods were NOT called when clicking close button - expect(mockPopupService.close).not.toHaveBeenCalled(); - expect(mockScrollIntoView).not.toHaveBeenCalled(); - expect(mockSetActive).not.toHaveBeenCalled(); - - // Simulate clicking elsewhere in the tab (not the close button) - const tabContent = tabWrapper!.querySelector('.dv-default-tab-content'); - fireEvent.pointerDown(tabContent!, { - bubbles: true, - }); - - // Verify that tab activation methods WERE called when clicking elsewhere - expect(mockPopupService.close).toHaveBeenCalled(); - expect(mockScrollIntoView).toHaveBeenCalled(); - expect(mockSetActive).toHaveBeenCalled(); - }); - }); }); diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts index d803884a2..b96b13dd8 100644 --- a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts +++ b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts @@ -379,16 +379,7 @@ export class TabsContainer !panelObject.api.isActive ); - wrapper.addEventListener('pointerdown', (event) => { - // Check if the click is on a close button or its children - const target = event.target as HTMLElement; - const isCloseButton = target.closest('.dv-default-tab-action') !== null; - - if (isCloseButton) { - // Let the close button handle its own event - return; - } - + wrapper.addEventListener('pointerdown', () => { this.accessor.popupService.close(); tab.element.scrollIntoView(); tab.panel.api.setActive();