fix(popper): - Remove popper mask and event attaching strategy (#466)

packages/popper/src/index.vue

@@ -10,17 +10,17 @@ import {
   onActivated,
   renderSlot,
   toDisplayString,
-  withCtx,
+  withDirectives,
 } from 'vue'
 
 import throwError from '@element-plus/utils/error'
-import { stop } from '@element-plus/utils/dom'
-import { renderBlock, PatchFlags } from '@element-plus/utils/vnode'
+import { renderBlock } from '@element-plus/utils/vnode'
 
 import usePopper from './use-popper/index'
 import defaultProps from './use-popper/defaults'
 
-import { Mask, renderPopper, renderTrigger, renderArrow } from './renderers'
+import { renderPopper, renderTrigger, renderArrow } from './renderers'
+import { ClickOutside } from '@element-plus/directives'
 
 const compName = 'ElPopper'
 const UPDATE_VISIBLE_EVENT = 'update:visible'
@@ -92,38 +92,32 @@ export default defineComponent({
       ],
     )
 
-    const trigger = renderTrigger($slots.trigger?.(), {
+    const _t = $slots.trigger?.()
+    const isManual = this.isManualMode()
+
+    const triggerProps = {
       ariaDescribedby: popperId,
       class: kls,
       ref: 'triggerRef',
       tabindex: tabIndex,
-      onMouseDown: stop,
-      onMouseUp: stop,
       ...this.events,
-    })
+    }
+
+    const trigger = isManual
+      ? renderTrigger(_t, triggerProps)
+      : withDirectives(renderTrigger(_t, triggerProps), [[ClickOutside, hide]])
 
     return renderBlock(Fragment, null, [
       trigger,
       appendToBody
         ? createVNode(
-          Teleport,
+          Teleport as any, // Vue did not support createVNode for Teleport
           {
             to: 'body',
             key: 0,
           },
           [
-            createVNode(
-              Mask,
-              {
-                hide,
-                isManualMode: this.isManualMode(),
-              },
-              {
-                default: withCtx(() => [popper]),
-              },
-              PatchFlags.PROPS,
-              ['hide', 'isManualMode'],
-            ),
+            popper,
           ],
         )
         : renderBlock(Fragment, { key: 1 }, [popper]),

packages/popper/src/renderers/index.ts

@@ -1,4 +1,3 @@
-export { default as Mask } from './mask'
 export { default as renderPopper } from './popper'
 export { default as renderTrigger } from './trigger'
 export { default as renderArrow } from './arrow'

packages/popper/src/renderers/mask.ts

@@ -1,61 +0,0 @@
-import { withDirectives, renderSlot, createVNode } from 'vue'
-import { ClickOutside } from '@element-plus/directives'
-
-interface IRenderMaskProps {
-  hide: () => void
-  manualMode: boolean
-}
-
-const _hoist1 = {
-  key: 0,
-  class: 'el-popper__mask',
-}
-
-const _hoist2 = {
-  key: 1,
-  class: 'el-popper__mask',
-}
-
-// export default function renderMask(popper: VNode, { hide, manualMode }: IRenderMaskProps): VNode {
-//   return manualMode ? withDirectives(
-//     renderBlock('div', _hoist1, [popper]),
-//     // marking excludes as any due to the current version of Vue's definition file
-//     // DOES NOT support types other than string as arguments
-//     [[ClickOutside, hide]],
-//   ) : renderBlock('div', _hoist2, [popper])
-// }
-
-export default ({
-  hide,
-  manualMode,
-}: IRenderMaskProps, { slots }) => {
-  const children = renderSlot(slots, 'default')
-  return manualMode
-    ? withDirectives(
-      createVNode('div', _hoist1, [ children ]), [[ClickOutside, hide]],
-    )
-    : createVNode('div', _hoist2, [ children ])
-}
-
-
-// defineComponent({
-//   template: `
-//     <div v-if="!manualMode" v-click-outside="hide">
-//       <slot />
-//     </div>
-//     <div v-else>
-//       <slot />
-//     </div>
-//   `,
-//   directives: {
-//     ClickOutside,
-//   },
-//   props: {
-//     hide: {
-//       type: Function as PropType<() => void>,
-//     },
-//     manualMode: {
-//       type: Boolean,
-//     },
-//   },
-// })

packages/popper/src/renderers/popper.ts

@@ -57,8 +57,8 @@ export default function renderPopper(
     Transition,
     {
       name,
-      onAfterEnter,
-      onAfterLeave,
+      'onAfter-enter': onAfterEnter,
+      'onAfter-leave': onAfterLeave,
     },
     {
       default: withCtx(() => [withDirectives(
@@ -74,6 +74,8 @@ export default function renderPopper(
             onMouseEnter,
             onMouseLeave,
             onClick: stop,
+            onMouseDown: stop,
+            onMouseUp: stop,
           },
           children,
           PatchFlags.CLASS | PatchFlags.STYLE | PatchFlags.PROPS | PatchFlags.HYDRATE_EVENTS,
@@ -81,6 +83,8 @@ export default function renderPopper(
             'aria-hidden',
             'onMouseenter',
             'onMouseleave',
+            'onMousedown',
+            'onMouseup',
             'onClick',
             'id',
           ],

packages/select/__tests__/select.spec.ts

@@ -29,7 +29,7 @@ const _mount = (template: string, data: any = () => ({}), otherObj?): any => mou
 
 function getOptions(): HTMLElement[] {
   return [...document.querySelectorAll<HTMLElement>(
-    '.el-popper__mask:last-child .el-select-dropdown__item',
+    'body > div:last-child .el-select-dropdown__item',
   )]
 }