From 32f19c55614b741b3b7cd2c89ad063d57dee37bb Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Thu, 11 Jul 2019 20:13:04 +0800
Subject: [PATCH] [bugfix] Popup: overlay may cover popup in some cases (#3831)

---
 .../test/__snapshots__/index.spec.js.snap            | 12 ++++++------
 src/mixins/popup/overlay.ts                          |  7 ++++---
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/dropdown-menu/test/__snapshots__/index.spec.js.snap b/src/dropdown-menu/test/__snapshots__/index.spec.js.snap
index 27bbff4f3..a4b194afc 100644
--- a/src/dropdown-menu/test/__snapshots__/index.spec.js.snap
+++ b/src/dropdown-menu/test/__snapshots__/index.spec.js.snap
@@ -27,6 +27,7 @@ exports[`close-on-click-outside 1`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
+    <div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2004; position: absolute; animation-duration: 0.2s;"></div>
     <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0.2s;">
       <div class="van-cell van-cell--clickable">
         <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
@@ -37,7 +38,6 @@ exports[`close-on-click-outside 1`] = `
         <div class="van-cell__title"><span>B</span></div>
       </div>
     </div>
-    <div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2004; position: absolute; animation-duration: 0.2s;"></div>
   </div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
     <!---->
@@ -73,6 +73,7 @@ exports[`direction up 1`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down">A</span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down">A</span></div>
   <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 768px;">
+    <div class="van-overlay van-fade-enter-active" style="z-index: 2008; position: absolute; animation-duration: 0.2s;"></div>
     <div class="van-popup van-popup--bottom van-dropdown-item__content van-popup-slide-bottom-enter van-popup-slide-bottom-enter-active" style="transition-duration: 0.2s;">
       <div class="van-cell van-cell--clickable">
         <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
@@ -83,7 +84,6 @@ exports[`direction up 1`] = `
         <div class="van-cell__title"><span>B</span></div>
       </div>
     </div>
-    <div class="van-overlay van-fade-enter-active" style="z-index: 2008; position: absolute; animation-duration: 0.2s;"></div>
   </div>
   <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 768px; display: none;">
     <!---->
@@ -96,6 +96,7 @@ exports[`disable close-on-click-outside 1`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
+    <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2006; position: absolute; animation-duration: 0.2s;"></div>
     <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-enter van-popup-slide-top-enter-active" style="transition-duration: 0.2s;">
       <div class="van-cell van-cell--clickable">
         <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
@@ -106,7 +107,6 @@ exports[`disable close-on-click-outside 1`] = `
         <div class="van-cell__title"><span>B</span></div>
       </div>
     </div>
-    <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2006; position: absolute; animation-duration: 0.2s;"></div>
   </div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
     <!---->
@@ -128,6 +128,7 @@ exports[`show dropdown item 1`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);">A</span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
+    <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2000; position: absolute; animation-duration: 0.2s;"></div>
     <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-enter van-popup-slide-top-enter-active" style="transition-duration: 0.2s;">
       <div class="van-cell van-cell--clickable">
         <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
@@ -138,7 +139,6 @@ exports[`show dropdown item 1`] = `
         <div class="van-cell__title"><span>B</span></div>
       </div>
     </div>
-    <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2000; position: absolute; animation-duration: 0.2s;"></div>
   </div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
     <!---->
@@ -163,6 +163,7 @@ exports[`show dropdown item 2`] = `
     </div>
   </div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
+    <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2001; position: absolute; animation-duration: 0.2s;"></div>
     <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-enter van-popup-slide-top-enter-active" style="transition-duration: 0.2s;">
       <div class="van-cell van-cell--clickable">
         <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
@@ -173,7 +174,6 @@ exports[`show dropdown item 2`] = `
         <div class="van-cell__title"><span>B</span></div>
       </div>
     </div>
-    <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2001; position: absolute; animation-duration: 0.2s;"></div>
   </div>
 </div>
 `;
@@ -195,6 +195,7 @@ exports[`show dropdown item 3`] = `
     </div>
   </div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
+    <div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2001; position: absolute; animation-duration: 0.2s;"></div>
     <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0.2s;">
       <div class="van-cell van-cell--clickable">
         <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
@@ -205,7 +206,6 @@ exports[`show dropdown item 3`] = `
         <div class="van-cell__title"><span>B</span></div>
       </div>
     </div>
-    <div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2001; position: absolute; animation-duration: 0.2s;"></div>
   </div>
 </div>
 `;
diff --git a/src/mixins/popup/overlay.ts b/src/mixins/popup/overlay.ts
index 5a6ac8421..71fe10352 100644
--- a/src/mixins/popup/overlay.ts
+++ b/src/mixins/popup/overlay.ts
@@ -44,9 +44,10 @@ export function updateOverlay(): void {
     const { vm, config } = context.top;
 
     const el = vm.$el;
-    const target = el && el.parentNode ? el.parentNode : document.body;
-    if (target) {
-      target.appendChild(overlay.$el);
+    if (el && el.parentNode) {
+      el.parentNode.insertBefore(overlay.$el, el);
+    } else {
+      document.body.appendChild(overlay.$el);
     }
 
     Object.assign(overlay, defaultConfig, config, {