From e62e29ef5be6a8fe048b8d31766fe12bc520b988 Mon Sep 17 00:00:00 2001
From: "C.Y.Kun" <30518686+emojiiii@users.noreply.github.com>
Date: Mon, 31 Jan 2022 23:07:09 +0800
Subject: [PATCH] fix(components): [popover] after-enter/leave events not
 trigger (#5681)

---
 .../popover/__tests__/popover.spec.ts         | 26 +++++++++++++++++--
 packages/components/popover/src/index.vue     | 14 +++++++++-
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/packages/components/popover/__tests__/popover.spec.ts b/packages/components/popover/__tests__/popover.spec.ts
index ba6172f814..305b1f38e0 100644
--- a/packages/components/popover/__tests__/popover.spec.ts
+++ b/packages/components/popover/__tests__/popover.spec.ts
@@ -1,10 +1,12 @@
-import { h } from 'vue'
+import { h, nextTick } from 'vue'
 import { PopupManager } from '@element-plus/utils/popup-manager'
 import makeMount from '@element-plus/test-utils/make-mount'
+import { rAF } from '@element-plus/test-utils/tick'
+import { ElPopperTrigger } from '@element-plus/components/popper'
 import Popover from '../src/index.vue'
 
 const AXIOM = 'Rem is the best girl'
-
+jest.useFakeTimers()
 const mount = makeMount(Popover, {
   slots: {
     default: () => AXIOM,
@@ -103,4 +105,24 @@ describe('Popover.vue', () => {
     const vm = wrapper.vm as any
     expect(vm.hide).toBeDefined()
   })
+
+  test('should be able to emit after-enter and after-leave', async () => {
+    const wrapper = mount({
+      attrs: {
+        trigger: 'click',
+      },
+    })
+    await nextTick()
+    const trigger$ = wrapper.findComponent(ElPopperTrigger)
+    const triggerEl = trigger$.find('.el-tooltip__trigger')
+    await triggerEl.trigger('click')
+    jest.runAllTimers()
+    await rAF()
+    expect(wrapper.emitted()).toHaveProperty('after-enter')
+
+    await triggerEl.trigger('click')
+    jest.runAllTimers()
+    await rAF()
+    expect(wrapper.emitted()).toHaveProperty('after-leave')
+  })
 })
diff --git a/packages/components/popover/src/index.vue b/packages/components/popover/src/index.vue
index fada627a56..0fbe0b378b 100644
--- a/packages/components/popover/src/index.vue
+++ b/packages/components/popover/src/index.vue
@@ -8,6 +8,8 @@
     :popper-class="kls"
     :popper-style="style"
     persistent
+    @show="afterEnter"
+    @hide="afterLeave"
   >
     <template v-if="$slots.reference">
       <slot name="reference" />
@@ -42,7 +44,7 @@ export default defineComponent({
   },
   props: usePopoverProps,
   emits,
-  setup(props) {
+  setup(props, { emit }) {
     const tooltipRef = ref<InstanceType<typeof ElTooltip> | null>(null)
     const popperRef = computed(() => {
       return unref(tooltipRef)?.popperRef
@@ -75,12 +77,22 @@ export default defineComponent({
       tooltipRef.value?.hide()
     }
 
+    const afterEnter = () => {
+      emit('after-enter')
+    }
+
+    const afterLeave = () => {
+      emit('after-leave')
+    }
+
     return {
       kls,
       style,
       tooltipRef,
       popperRef,
       hide,
+      afterEnter,
+      afterLeave,
     }
   },
 })