diff --git a/packages/components/table/__tests__/table.test.ts b/packages/components/table/__tests__/table.test.ts index 03d87e4a2a..d8236cf9d0 100644 --- a/packages/components/table/__tests__/table.test.ts +++ b/packages/components/table/__tests__/table.test.ts @@ -2337,6 +2337,56 @@ describe('Table.vue', () => { mockCellRect2.mockRestore() }) + it('should cleanup tooltip dynamically', async () => { + const mockRangeRect = vi + .spyOn(Range.prototype, 'getBoundingClientRect') + .mockReturnValue({ + width: 150, + height: 30, + } as DOMRect) + + const wrapper = mount({ + components: { + ElTable, + ElTableColumn, + }, + template: ` + + + + `, + + data() { + return { + testData: getTestData(), + showOverflowTooltip: true, + } + }, + }) + + await doubleWait() + const tr = wrapper.findAll('.overflow_tooltip') + const mockCellRect = vi + .spyOn(tr[1].find('.cell').element, 'getBoundingClientRect') + .mockReturnValue({ + width: 100, + height: 30, + } as DOMRect) + await tr[1].trigger('mouseenter') + await rAF() + expect(wrapper.find('.el-popper').exists()).toBe(true) + await wrapper.setData({ showOverflowTooltip: false }) + await tr[1].trigger('mouseleave') + await rAF() + await tr[1].trigger('mouseenter') + await rAF() + expect(wrapper.find('.el-popper').exists()).toBe(false) + + mockRangeRect.mockRestore() + mockCellRect.mockRestore() + wrapper.unmount() + }) + it('use-tooltip-formatter', async () => { const testData = getTestData() as any const mockRangeRect = vi diff --git a/packages/components/table/src/table-body/events-helper.ts b/packages/components/table/src/table-body/events-helper.ts index 79df90d3f3..81d815fe4f 100644 --- a/packages/components/table/src/table-body/events-helper.ts +++ b/packages/components/table/src/table-body/events-helper.ts @@ -125,6 +125,9 @@ function useEvents(props: Partial>) { } if (!tooltipOptions) { + if (removePopper?.trigger === cell) { + removePopper?.() + } return } diff --git a/packages/components/table/src/util.ts b/packages/components/table/src/util.ts index b55666f1f2..f0bf291e6f 100644 --- a/packages/components/table/src/util.ts +++ b/packages/components/table/src/util.ts @@ -507,8 +507,14 @@ export function createTablePopper( vm.component!.exposed!.onOpen() const scrollContainer = parentNode?.querySelector(`.${ns}-scrollbar__wrap`) removePopper = () => { + if (vm.component?.exposed?.onClose) { + vm.component.exposed.onClose() + } render(null, container) - scrollContainer?.removeEventListener('scroll', removePopper!) + const currentRemovePopper = removePopper as RemovePopperFn + scrollContainer?.removeEventListener('scroll', currentRemovePopper) + currentRemovePopper.trigger = undefined + currentRemovePopper.vm = undefined removePopper = null } removePopper.trigger = trigger ?? undefined