fix(components): [popper] trigger memory leak issue (#22763)

* fix(components): trigger memory leak issue

* fix: update test

* Update packages/components/popper/src/trigger.vue

---------

Co-authored-by: btea <2356281422@qq.com>

packages/components/popper/__tests__/trigger.test.tsx

@@ -73,5 +73,30 @@ describe('<ElPopperTrigger />', () => {
       await nextTick()
       expect(onClick).toHaveBeenCalled()
     })
+    it('should cleanup listeners when triggerRef changes', async () => {
+      const onClick = vi.fn()
+      const first = document.createElement('p')
+      const removeSpy = vi.spyOn(first, 'removeEventListener')
+      const addSpy = vi.spyOn(first, 'addEventListener')
+
+      wrapper = mountTrigger({
+        onClick,
+        virtualTriggering: true,
+        virtualRef: first,
+      })
+      await nextTick()
+
+      await wrapper.setProps({
+        virtualRef: {
+          getBoundingClientRect: () => {
+            return { top: 0, left: 0, right: 0, bottom: 0, width: 0, height: 0 }
+          },
+        },
+      })
+      await nextTick()
+
+      expect(addSpy).toHaveBeenCalledWith('click', onClick, false)
+      expect(removeSpy).toHaveBeenCalledWith('click', onClick, false)
+    })
   })
 })

packages/components/popper/src/trigger.vue

@@ -86,6 +86,19 @@ onMounted(() => {
     (el, prevEl) => {
       virtualTriggerAriaStopWatch?.()
       virtualTriggerAriaStopWatch = undefined
+
+      if (isElement(prevEl)) {
+        TRIGGER_ELE_EVENTS.forEach((eventName) => {
+          const handler = props[eventName]
+          if (handler) {
+            ;(prevEl as HTMLElement).removeEventListener(
+              eventName.slice(2).toLowerCase(),
+              handler,
+              ['onFocus', 'onBlur'].includes(eventName)
+            )
+          }
+        })
+      }
       if (isElement(el)) {
         TRIGGER_ELE_EVENTS.forEach((eventName) => {
           const handler = props[eventName]
@@ -95,11 +108,6 @@ onMounted(() => {
               handler,
               ['onFocus', 'onBlur'].includes(eventName)
             )
-            ;(prevEl as HTMLElement)?.removeEventListener?.(
-              eventName.slice(2).toLowerCase(),
-              handler,
-              ['onFocus', 'onBlur'].includes(eventName)
-            )
           }
         })
         if (isFocusable(el as HTMLElement)) {