fix(popper): - Remove popper mask and event attaching strategy (eleme…

…nt-plus#466)
zxwk1998 · Oct 26, 2020 · b06352a · b06352a
1 parent 42d53ee
commit b06352a
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 86 deletions.
diff --git a/packages/popper/src/index.vue b/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]),

diff --git a/packages/popper/src/renderers/index.ts b/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'
diff --git a/packages/popper/src/renderers/mask.ts b/packages/popper/src/renderers/mask.ts
diff --git a/packages/popper/src/renderers/popper.ts b/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,13 +74,17 @@ export default function renderPopper(
             onMouseEnter,
             onMouseLeave,
             onClick: stop,
+            onMouseDown: stop,
+            onMouseUp: stop,
           },
           children,
           PatchFlags.CLASS | PatchFlags.STYLE | PatchFlags.PROPS | PatchFlags.HYDRATE_EVENTS,
           [
             'aria-hidden',
             'onMouseenter',
             'onMouseleave',
+            'onMousedown',
+            'onMouseup',
             'onClick',
             'id',
           ],

diff --git a/packages/select/__tests__/select.spec.ts b/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',
   )]
 }