fix(popper): making popper z-index dynamical (#632)

packages/popover/__tests__/popover.spec.ts

@@ -1,5 +1,6 @@
 import makeMount from '../../test-utils/make-mount'
 import Popover from '../src/index.vue'
+import PopupManager from '@element-plus/utils/popup-manager'
 
 const AXIOM = 'Rem is the best girl'
 
@@ -63,4 +64,14 @@ describe('Popover.vue', () => {
 
     expect(wrapper.text()).toBe(content)
   })
+
+  test('popper z-index should be dynamical', () => {
+    const wrapper = mount()
+
+    expect(
+      Number.parseInt(
+        window.getComputedStyle(wrapper.find('.el-popper').element).zIndex,
+      ),
+    ).toBeLessThanOrEqual(PopupManager.zIndex)
+  })
 })

packages/popover/src/index.vue

@@ -90,6 +90,7 @@ export default defineComponent({
       popperStyle: popperStyle,
       popperId,
       visibility,
+      isManual: this.isManualMode(),
       onMouseEnter: onPopperMouseEnter,
       onMouseLeave: onPopperMouseLeave,
       onAfterEnter,

packages/popover/src/usePopover.ts

@@ -1,7 +1,7 @@
 import { computed, watch } from 'vue'
 import { isString } from '@element-plus/utils/util'
 import { usePopper } from '@element-plus/popper'
-
+import PopupManager from '@element-plus/utils/popup-manager'
 
 import type { IPopperOptions } from '@element-plus/popper'
 import type { SetupContext } from 'vue'
@@ -26,6 +26,7 @@ export default function usePopover(props: IUsePopover, ctx: SetupContext<string[
 
     return {
       width: _width,
+      zIndex: PopupManager.nextZIndex(),
     }
   })
 

packages/popper/__tests__/popper.spec.ts

@@ -4,6 +4,7 @@ import * as popperExports from '@popperjs/core'
 import ElPopper from '../src/index.vue'
 
 import type { VueWrapper } from '@vue/test-utils'
+import PopupManager from '@element-plus/utils/popup-manager'
 
 type UnknownProps = Record<string, unknown>
 
@@ -103,6 +104,16 @@ describe('Popper.vue', () => {
     expect(wrapper.find(selector).exists()).toBe(false)
   })
 
+  test('popper z-index should be dynamical', () => {
+    const wrapper = _mount()
+
+    expect(
+      Number.parseInt(
+        window.getComputedStyle(wrapper.find('.el-popper').element).zIndex,
+      ),
+    ).toBeLessThanOrEqual(PopupManager.zIndex)
+  })
+
   test('should show popper when mouse entered and hide when popper left', async () => {
     const wrapper = _mount({
       appendToBody: false,
@@ -166,7 +177,6 @@ describe('Popper.vue', () => {
     expect(onMouseUp).toHaveBeenCalledTimes(1)
     document.removeEventListener('mouseup', onMouseUp)
     document.removeEventListener('mousedown', onMouseDown)
-
   })
 
   test('should disable popper to popup', async () => {

packages/popper/src/index.vue

@@ -63,6 +63,7 @@ export default defineComponent({
       onAfterLeave,
       popperClass,
       popperId,
+      popperStyle,
       pure,
       showArrow,
       transition,
@@ -77,6 +78,7 @@ export default defineComponent({
         name: transition,
         popperClass,
         popperId,
+        popperStyle,
         pure,
         isManual,
         onMouseEnter: onPopperMouseEnter,

packages/popper/src/use-popper/index.ts

@@ -1,9 +1,4 @@
-import {
-  computed,
-  ref,
-  reactive,
-  watch,
-} from 'vue'
+import { computed, ref, reactive, watch } from 'vue'
 import { createPopper } from '@popperjs/core'
 
 import {
@@ -14,17 +9,26 @@ import {
   isString,
   $,
 } from '@element-plus/utils/util'
+import PopupManager from '@element-plus/utils/popup-manager'
 
 import usePopperOptions from './popper-options'
 
 import type { ComponentPublicInstance, SetupContext, Ref } from 'vue'
-import type { IPopperOptions, TriggerType, PopperInstance, RefElement } from './defaults'
+import type {
+  IPopperOptions,
+  TriggerType,
+  PopperInstance,
+  RefElement,
+} from './defaults'
 
 type ElementType = ComponentPublicInstance | HTMLElement
 
 export const DEFAULT_TRIGGER = ['hover']
 export const UPDATE_VISIBLE_EVENT = 'update:visible'
-export default function (props: IPopperOptions, { emit }: SetupContext<string[]>) {
+export default function(
+  props: IPopperOptions,
+  { emit }: SetupContext<string[]>,
+) {
   const arrowRef = ref<RefElement>(null)
   const triggerRef = ref(null) as Ref<ElementType>
   const popperRef = ref<RefElement>(null)
@@ -37,6 +41,12 @@ export default function (props: IPopperOptions, { emit }: SetupContext<string[]>
 
   const isManualMode = () => props.manualMode || props.trigger === 'manual'
 
+  const popperStyle = computed(() => {
+    return {
+      zIndex: String(PopupManager.nextZIndex()),
+    }
+  })
+
   const popperOptions = usePopperOptions(props, {
     arrow: arrowRef,
   })
@@ -56,7 +66,9 @@ export default function (props: IPopperOptions, { emit }: SetupContext<string[]>
     },
     set(val) {
       if (isManualMode()) return
-      isBool(props.visible) ? emit(UPDATE_VISIBLE_EVENT, val) : state.visible = val
+      isBool(props.visible)
+        ? emit(UPDATE_VISIBLE_EVENT, val)
+        : (state.visible = val)
     },
   })
 
@@ -140,11 +152,7 @@ export default function (props: IPopperOptions, { emit }: SetupContext<string[]>
     const _trigger = isHTMLElement(unwrappedTrigger)
       ? unwrappedTrigger
       : (unwrappedTrigger as ComponentPublicInstance).$el
-    popperInstance = createPopper(
-      _trigger,
-      $(popperRef),
-      $(popperOptions),
-    )
+    popperInstance = createPopper(_trigger, $(popperRef), $(popperOptions))
 
     popperInstance.update()
   }
@@ -284,6 +292,7 @@ export default function (props: IPopperOptions, { emit }: SetupContext<string[]>
     popperId,
     popperInstance,
     popperRef,
+    popperStyle,
     triggerRef,
     visibility,
   }