From 9902c33dbf73c780d41a21311a55bec0c58547a7 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <591449570@qq.com>
Date: Mon, 14 Sep 2020 23:42:33 +0800
Subject: [PATCH] fix(dropdown): fix dropdown code based on popper's change

---
 packages/dropdown/__tests__/dropdown.spec.ts |  22 +--
 packages/dropdown/src/dropdown-menu.vue      |   5 -
 packages/dropdown/src/dropdown.vue           |  12 +-
 website/docs/en-US/dropdown.md               | 169 +++++++++++--------
 4 files changed, 112 insertions(+), 96 deletions(-)

diff --git a/packages/dropdown/__tests__/dropdown.spec.ts b/packages/dropdown/__tests__/dropdown.spec.ts
index 464f850d09..c3a6f8b77c 100644
--- a/packages/dropdown/__tests__/dropdown.spec.ts
+++ b/packages/dropdown/__tests__/dropdown.spec.ts
@@ -44,13 +44,13 @@ describe('Dropdown', () => {
     )
     const content = wrapper.findComponent({ ref: 'b' }).vm.$refs.popper as any
     const triggerElm = wrapper.find('.el-dropdown-link')
-    expect(content.value).toBe(false)
+    expect(content.visible).toBe(false)
     await triggerElm.trigger(MOUSE_ENTER_EVENT)
     await sleep(TIMEOUT)
-    expect(content.value).toBe(true)
+    expect(content.visible).toBe(true)
     await triggerElm.trigger(MOUSE_LEAVE_EVENT)
     await sleep(TIMEOUT)
-    expect(content.value).toBe(false)
+    expect(content.visible).toBe(false)
   })
 
   test('menu click', async () => {
@@ -117,13 +117,13 @@ describe('Dropdown', () => {
     )
     const content = wrapper.findComponent({ ref: 'b' }).vm.$refs.popper as any
     const triggerElm = wrapper.find('.el-dropdown-link')
-    expect(content.value).toBe(false)
+    expect(content.visible).toBe(false)
     await triggerElm.trigger(MOUSE_ENTER_EVENT)
     await sleep(TIMEOUT)
-    expect(content.value).toBe(false)
+    expect(content.visible).toBe(false)
     await triggerElm.trigger(CLICK)
     await sleep(TIMEOUT)
-    expect(content.value).toBe(true)
+    expect(content.visible).toBe(true)
   })
 
   test('split button', async () => {
@@ -157,12 +157,12 @@ describe('Dropdown', () => {
     const content = wrapper.findComponent({ ref: 'b' }).vm.$refs.popper as any
     const triggerElm = wrapper.find('.el-dropdown__caret-button')
     const button = wrapper.find('.el-button')
-    expect(content.value).toBe(false)
+    expect(content.visible).toBe(false)
     await button.trigger('click')
     expect((wrapper.vm as any).name).toBe('click')
     await triggerElm.trigger(MOUSE_ENTER_EVENT)
     await sleep(TIMEOUT)
-    expect(content.value).toBe(true)
+    expect(content.visible).toBe(true)
   })
 
   test('hide on click', async () => {
@@ -192,7 +192,7 @@ describe('Dropdown', () => {
     await sleep(TIMEOUT)
     await wrapper.findComponent({ ref: 'c' }).trigger('click')
     await sleep(TIMEOUT)
-    expect(content.value).toBe(true)
+    expect(content.visible).toBe(true)
   })
 
   test('triggerElm keydown', async () => {
@@ -224,7 +224,7 @@ describe('Dropdown', () => {
       keyCode: eventKeys.enter,
     })
     await sleep(TIMEOUT)
-    expect(content.value).toBe(false)
+    expect(content.visible).toBe(false)
 
     await triggerElm.trigger(MOUSE_ENTER_EVENT)
     await sleep(TIMEOUT)
@@ -232,7 +232,7 @@ describe('Dropdown', () => {
       keyCode: eventKeys.tab,
     })
     await sleep(TIMEOUT)
-    expect(content.value).toBe(false)
+    expect(content.visible).toBe(false)
   })
 
   test('dropdown menu keydown', async () => {
diff --git a/packages/dropdown/src/dropdown-menu.vue b/packages/dropdown/src/dropdown-menu.vue
index ee47c9eac6..db2f681eba 100644
--- a/packages/dropdown/src/dropdown-menu.vue
+++ b/packages/dropdown/src/dropdown-menu.vue
@@ -1,6 +1,5 @@
 <template>
   <ul
-    v-clickOutside:[_trigger]="_hide"
     :class="[size && `el-dropdown-menu--${size}`]"
     class="el-dropdown-menu"
     @mouseenter.stop="show"
@@ -11,14 +10,10 @@
 </template>
 <script lang='ts'>
 import { defineComponent, getCurrentInstance, onMounted, ref } from 'vue'
-import ClickOutside from '@element-plus/directives/click-outside'
 import { useDropdown, initDropdownDomEvent } from './useDropdown'
 
 export default defineComponent({
   name: 'ElDropdownMenu',
-  directives: {
-    ClickOutside,
-  },
   setup() {
     const { _elDropdownSize, elDropdown } = useDropdown()
     const size = _elDropdownSize.value
diff --git a/packages/dropdown/src/dropdown.vue b/packages/dropdown/src/dropdown.vue
index fa615e2a6b..7fb2c41429 100644
--- a/packages/dropdown/src/dropdown.vue
+++ b/packages/dropdown/src/dropdown.vue
@@ -11,7 +11,6 @@ import {
   VNode,
 } from 'vue'
 import { on, addClass, removeClass } from '@element-plus/utils/dom'
-import ClickOutside from '@element-plus/directives/click-outside'
 import ElButton from '@element-plus/button/src/button.vue'
 import ElButtonGroup from '@element-plus/button/src/button-group.vue'
 import ELPopper from '@element-plus/popper/src/index.vue'
@@ -19,9 +18,6 @@ import { useDropdown } from './useDropdown'
 
 export default defineComponent({
   name: 'ElDropdown',
-  directives: {
-    ClickOutside,
-  },
   components: {
     ElButton,
     ElButtonGroup,
@@ -225,14 +221,16 @@ export default defineComponent({
       class: 'el-dropdown',
     }, [triggerVnode.value])
 
+    const onVisibleUpdate = (val: boolean) => visible.value = val
+
     return () => h(ELPopper, {
       ref: 'popper',
       placement: props.placement,
       effect: props.effect,
-      value: visible.value,
-      manualMode: true,
+      visible: visible.value,
+      'onUpdate:visible': onVisibleUpdate,
       popperClass: 'el-dropdown-popper',
-      trigger: props.trigger,
+      trigger: [props.trigger],
     }, {
       default: () => slots.dropdown?.(),
       trigger: () => dropdownVnode,
diff --git a/website/docs/en-US/dropdown.md b/website/docs/en-US/dropdown.md
index a7d1ad7322..16276d52b7 100644
--- a/website/docs/en-US/dropdown.md
+++ b/website/docs/en-US/dropdown.md
@@ -11,13 +11,15 @@ Hover on the dropdown menu to unfold it for more actions.
   <span class="el-dropdown-link">
     Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
   </span>
-  <el-dropdown-menu slot="dropdown">
-    <el-dropdown-item>Action 1</el-dropdown-item>
-    <el-dropdown-item>Action 2</el-dropdown-item>
-    <el-dropdown-item>Action 3</el-dropdown-item>
-    <el-dropdown-item disabled>Action 4</el-dropdown-item>
-    <el-dropdown-item divided>Action 5</el-dropdown-item>
-  </el-dropdown-menu>
+  <template #dropdown>
+    <el-dropdown-menu>
+      <el-dropdown-item>Action 1</el-dropdown-item>
+      <el-dropdown-item>Action 2</el-dropdown-item>
+      <el-dropdown-item>Action 3</el-dropdown-item>
+      <el-dropdown-item disabled>Action 4</el-dropdown-item>
+      <el-dropdown-item divided>Action 5</el-dropdown-item>
+    </el-dropdown-menu> 
+  </template>
 </el-dropdown>
 
 <style>
@@ -44,23 +46,27 @@ Use the button to trigger the dropdown list.
   <el-button type="primary">
     Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
   </el-button>
-  <el-dropdown-menu slot="dropdown">
-    <el-dropdown-item>Action 1</el-dropdown-item>
-    <el-dropdown-item>Action 2</el-dropdown-item>
-    <el-dropdown-item>Action 3</el-dropdown-item>
-    <el-dropdown-item>Action 4</el-dropdown-item>
-    <el-dropdown-item>Action 5</el-dropdown-item>
-  </el-dropdown-menu>
+  <template #dropdown>
+    <el-dropdown-menu>
+      <el-dropdown-item>Action 1</el-dropdown-item>
+      <el-dropdown-item>Action 2</el-dropdown-item>
+      <el-dropdown-item>Action 3</el-dropdown-item>
+      <el-dropdown-item>Action 4</el-dropdown-item>
+      <el-dropdown-item>Action 5</el-dropdown-item>
+    </el-dropdown-menu>
+  </template>
 </el-dropdown>
 <el-dropdown split-button type="primary" @click="handleClick">
   Dropdown List
-  <el-dropdown-menu slot="dropdown">
-    <el-dropdown-item>Action 1</el-dropdown-item>
-    <el-dropdown-item>Action 2</el-dropdown-item>
-    <el-dropdown-item>Action 3</el-dropdown-item>
-    <el-dropdown-item>Action 4</el-dropdown-item>
-    <el-dropdown-item>Action 5</el-dropdown-item>
-  </el-dropdown-menu>
+  <template #dropdown>
+    <el-dropdown-menu>
+      <el-dropdown-item>Action 1</el-dropdown-item>
+      <el-dropdown-item>Action 2</el-dropdown-item>
+      <el-dropdown-item>Action 3</el-dropdown-item>
+      <el-dropdown-item>Action 4</el-dropdown-item>
+      <el-dropdown-item>Action 5</el-dropdown-item>
+    </el-dropdown-menu>
+  </template>
 </el-dropdown>
 
 <style>
@@ -101,13 +107,15 @@ Click the triggering element or hover on it.
       <span class="el-dropdown-link">
         Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
       </span>
-      <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
-        <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
-        <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
-        <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
-        <el-dropdown-item icon="el-icon-circle-check">Action 5</el-dropdown-item>
-      </el-dropdown-menu>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-circle-check">Action 5</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
     </el-dropdown>
   </el-col>
   <el-col :span="12">
@@ -116,13 +124,15 @@ Click the triggering element or hover on it.
       <span class="el-dropdown-link">
         Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
       </span>
-      <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
-        <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
-        <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
-        <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
-        <el-dropdown-item icon="el-icon-circle-check">Action 5</el-dropdown-item>
-      </el-dropdown-menu>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
+          <el-dropdown-item icon="el-icon-circle-check">Action 5</el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
     </el-dropdown>
   </el-col>
 </el-row>
@@ -155,13 +165,15 @@ Use `hide-on-click` to define if menu closes on clicking.
   <span class="el-dropdown-link">
     Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
   </span>
-  <el-dropdown-menu slot="dropdown">
-    <el-dropdown-item>Action 1</el-dropdown-item>
-    <el-dropdown-item>Action 2</el-dropdown-item>
-    <el-dropdown-item>Action 3</el-dropdown-item>
-    <el-dropdown-item disabled>Action 4</el-dropdown-item>
-    <el-dropdown-item divided>Action 5</el-dropdown-item>
-  </el-dropdown-menu>
+  <template #dropdown>
+    <el-dropdown-menu>
+      <el-dropdown-item>Action 1</el-dropdown-item>
+      <el-dropdown-item>Action 2</el-dropdown-item>
+      <el-dropdown-item>Action 3</el-dropdown-item>
+      <el-dropdown-item disabled>Action 4</el-dropdown-item>
+      <el-dropdown-item divided>Action 5</el-dropdown-item>
+    </el-dropdown-menu>
+  </template>
 </el-dropdown>
 
 <style>
@@ -186,13 +198,15 @@ Clicking each dropdown item fires an event whose parameter is assigned by each i
   <span class="el-dropdown-link">
     Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
   </span>
-  <el-dropdown-menu slot="dropdown">
-    <el-dropdown-item command="a">Action 1</el-dropdown-item>
-    <el-dropdown-item command="b">Action 2</el-dropdown-item>
-    <el-dropdown-item command="c">Action 3</el-dropdown-item>
-    <el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>
-    <el-dropdown-item command="e" divided>Action 5</el-dropdown-item>
-  </el-dropdown-menu>
+  <template #dropdown>
+    <el-dropdown-menu>
+      <el-dropdown-item command="a">Action 1</el-dropdown-item>
+      <el-dropdown-item command="b">Action 2</el-dropdown-item>
+      <el-dropdown-item command="c">Action 3</el-dropdown-item>
+      <el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>
+      <el-dropdown-item command="e" divided>Action 5</el-dropdown-item>
+    </el-dropdown-menu>
+  </template>
 </el-dropdown>
 
 <style>
@@ -226,42 +240,51 @@ Besides default size, Dropdown component provides three additional sizes for you
 ```html
 <el-dropdown split-button type="primary">
   Default
-  <el-dropdown-menu slot="dropdown">
-    <el-dropdown-item>Action 1</el-dropdown-item>
-    <el-dropdown-item>Action 2</el-dropdown-item>
-    <el-dropdown-item>Action 3</el-dropdown-item>
-    <el-dropdown-item>Action 4</el-dropdown-item>
-  </el-dropdown-menu>
+  <template #dropdown>
+    <el-dropdown-menu>
+      <el-dropdown-item>Action 1</el-dropdown-item>
+      <el-dropdown-item>Action 2</el-dropdown-item>
+      <el-dropdown-item>Action 3</el-dropdown-item>
+      <el-dropdown-item>Action 4</el-dropdown-item>
+    </el-dropdown-menu>
+  </template>
 </el-dropdown>
 
 <el-dropdown size="medium" split-button type="primary">
   Medium
-  <el-dropdown-menu slot="dropdown">
-    <el-dropdown-item>Action 1</el-dropdown-item>
-    <el-dropdown-item>Action 2</el-dropdown-item>
-    <el-dropdown-item>Action 3</el-dropdown-item>
-    <el-dropdown-item>Action 4</el-dropdown-item>
-  </el-dropdown-menu>
+  <template #dropdown>
+    <el-dropdown-menu>
+      <el-dropdown-item>Action 1</el-dropdown-item>
+      <el-dropdown-item>Action 2</el-dropdown-item>
+      <el-dropdown-item>Action 3</el-dropdown-item>
+      <el-dropdown-item>Action 4</el-dropdown-item>
+    </el-dropdown-menu>
+  </template>
 </el-dropdown>
 
+
 <el-dropdown size="small" split-button type="primary">
   Small
-  <el-dropdown-menu slot="dropdown">
-   <el-dropdown-item>Action 1</el-dropdown-item>
-   <el-dropdown-item>Action 2</el-dropdown-item>
-   <el-dropdown-item>Action 3</el-dropdown-item>
-   <el-dropdown-item>Action 4</el-dropdown-item>
-  </el-dropdown-menu>
+  <template #dropdown>
+    <el-dropdown-menu>
+      <el-dropdown-item>Action 1</el-dropdown-item>
+      <el-dropdown-item>Action 2</el-dropdown-item>
+      <el-dropdown-item>Action 3</el-dropdown-item>
+      <el-dropdown-item>Action 4</el-dropdown-item>
+    </el-dropdown-menu>
+  </template>
 </el-dropdown>
 
 <el-dropdown size="mini" split-button type="primary">
   Mini
-  <el-dropdown-menu slot="dropdown">
-    <el-dropdown-item>Action 1</el-dropdown-item>
-    <el-dropdown-item>Action 2</el-dropdown-item>
-    <el-dropdown-item>Action 3</el-dropdown-item>
-    <el-dropdown-item>Action 4</el-dropdown-item>
-  </el-dropdown-menu>
+  <template #dropdown>
+    <el-dropdown-menu>
+      <el-dropdown-item>Action 1</el-dropdown-item>
+      <el-dropdown-item>Action 2</el-dropdown-item>
+      <el-dropdown-item>Action 3</el-dropdown-item>
+      <el-dropdown-item>Action 4</el-dropdown-item>
+    </el-dropdown-menu>
+  </template>
 </el-dropdown>
 ```
 :::