From ff332345f2f61e628fd88fbd26cea9d6ef16de84 Mon Sep 17 00:00:00 2001
From: "C.Y.Kun" <30518686+undefined-degisn@users.noreply.github.com>
Date: Fri, 5 Nov 2021 15:33:17 +0800
Subject: [PATCH] fix(components): el-dropdown cannot be used with v-show
 (#4221)

---
 packages/components/dropdown/src/dropdown.vue | 105 +++++++++---------
 1 file changed, 51 insertions(+), 54 deletions(-)

diff --git a/packages/components/dropdown/src/dropdown.vue b/packages/components/dropdown/src/dropdown.vue
index fb4d5ba928..701c94a390 100644
--- a/packages/components/dropdown/src/dropdown.vue
+++ b/packages/components/dropdown/src/dropdown.vue
@@ -1,58 +1,55 @@
 <template>
-  <el-popper
-    ref="triggerVnode"
-    v-model:visible="visible"
-    :placement="placement"
-    :fallback-placements="['bottom', 'top', 'right', 'left']"
-    :effect="effect"
-    pure
-    :manual-mode="true"
-    :trigger="[trigger]"
-    popper-class="el-dropdown__popper"
-    append-to-body
-    transition="el-zoom-in-top"
-    :stop-popper-mouse-event="false"
-    :gpu-acceleration="false"
-  >
-    <template #default>
-      <el-scrollbar
-        ref="scrollbar"
-        tag="ul"
-        :wrap-style="wrapStyle"
-        view-class="el-dropdown__list"
-      >
-        <slot name="dropdown"></slot>
-      </el-scrollbar>
-    </template>
-    <template #trigger>
-      <div
-        :class="[
-          'el-dropdown',
-          dropdownSize ? 'el-dropdown--' + dropdownSize : '',
-        ]"
-      >
-        <slot v-if="!splitButton" name="default"></slot>
-        <template v-else>
-          <el-button-group>
-            <el-button
-              :size="dropdownSize"
-              :type="type"
-              @click="handlerMainButtonClick"
-            >
-              <slot name="default"></slot>
-            </el-button>
-            <el-button
-              :size="dropdownSize"
-              :type="type"
-              class="el-dropdown__caret-button"
-            >
-              <el-icon class="el-dropdown__icon"><arrow-down /></el-icon>
-            </el-button>
-          </el-button-group>
-        </template>
-      </div>
-    </template>
-  </el-popper>
+  <div class="el-dropdown">
+    <el-popper
+      ref="triggerVnode"
+      v-model:visible="visible"
+      :placement="placement"
+      :fallback-placements="['bottom', 'top', 'right', 'left']"
+      :effect="effect"
+      pure
+      :manual-mode="true"
+      :trigger="[trigger]"
+      popper-class="el-dropdown__popper"
+      append-to-body
+      transition="el-zoom-in-top"
+      :stop-popper-mouse-event="false"
+      :gpu-acceleration="false"
+    >
+      <template #default>
+        <el-scrollbar
+          ref="scrollbar"
+          tag="ul"
+          :wrap-style="wrapStyle"
+          view-class="el-dropdown__list"
+        >
+          <slot name="dropdown"></slot>
+        </el-scrollbar>
+      </template>
+      <template #trigger>
+        <div :class="[dropdownSize ? 'el-dropdown--' + dropdownSize : '']">
+          <slot v-if="!splitButton" name="default"></slot>
+          <template v-else>
+            <el-button-group>
+              <el-button
+                :size="dropdownSize"
+                :type="type"
+                @click="handlerMainButtonClick"
+              >
+                <slot name="default"></slot>
+              </el-button>
+              <el-button
+                :size="dropdownSize"
+                :type="type"
+                class="el-dropdown__caret-button"
+              >
+                <el-icon class="el-dropdown__icon"><arrow-down /></el-icon>
+              </el-button>
+            </el-button-group>
+          </template>
+        </div>
+      </template>
+    </el-popper>
+  </div>
 </template>
 <script lang="ts">
 import {