fix(components): [focus-trap, popper, tooltip] memory leak (element-plus#20147)

* fix(components): [focus-trap, popper, tooltip] memory leak

* fix(components): [popper] memory leak

* fix(components): [popper] memory leak

* fix(components): [focus-trap, popper, tooltip] memory leak

---------

Co-authored-by: qiang <qw13131wang@gmail.com>

Author: gjfei

packages/components/focus-trap/src/focus-trap.vue

@@ -330,6 +330,9 @@ export default defineComponent({
         forwardRef.value.removeEventListener('focusout', onFocusOut)
         forwardRef.value = undefined
       }
+
+      lastFocusBeforeTrapped = null
+      lastFocusAfterTrapped = null
     })
 
     return {

packages/components/popper/src/composables/use-content.ts

@@ -1,4 +1,12 @@
-import { computed, inject, onMounted, ref, unref, watch } from 'vue'
+import {
+  computed,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  unref,
+  watch,
+} from 'vue'
 import { isUndefined } from 'lodash-unified'
 import { usePopper } from '@element-plus/hooks'
 import { POPPER_INJECTION_KEY } from '../constants'
@@ -74,6 +82,10 @@ export const usePopperContent = (props: PopperContentProps) => {
     )
   })
 
+  onBeforeUnmount(() => {
+    popperInstanceRef.value = undefined
+  })
+
   return {
     attributes,
     arrowRef,

packages/components/popper/src/composables/use-focus-trap.ts

@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { onBeforeUnmount, ref } from 'vue'
 
 import type { SetupContext } from 'vue'
 import type { PopperContentEmits, PopperContentProps } from '../content'
@@ -44,6 +44,10 @@ export const usePopperContentFocusTrap = (
     emit('close')
   }
 
+  onBeforeUnmount(() => {
+    focusStartRef.value = undefined
+  })
+
   return {
     focusStartRef,
     trapped,

packages/components/popper/src/content.vue

@@ -146,6 +146,7 @@ onMounted(() => {
 onBeforeUnmount(() => {
   triggerTargetAriaStopWatch?.()
   triggerTargetAriaStopWatch = undefined
+  contentRef.value = undefined
 })
 
 defineExpose({

packages/components/tooltip/src/tooltip.vue

@@ -53,6 +53,7 @@
 <script lang="ts" setup>
 import {
   computed,
+  onBeforeUnmount,
   onDeactivated,
   provide,
   readonly,
@@ -165,6 +166,10 @@ const isFocusInsideContent = (event?: FocusEvent) => {
 
 onDeactivated(() => open.value && hide())
 
+onBeforeUnmount(() => {
+  toggleReason.value = undefined
+})
+
 defineExpose({
   /**
    * @description el-popper component instance