From ff85de854c1ecb71d81431c3a2218e7cdd723664 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Fri, 2 Aug 2019 10:41:40 +0800
Subject: [PATCH] [bugfix] Popup: ensure z-index setting order (#4026)

---
 src/action-sheet/test/index.spec.js           |  6 ++--
 .../test/__snapshots__/index.spec.js.snap     | 15 ++++------
 src/mixins/popup/index.js                     | 30 +++++++++----------
 .../test/__snapshots__/index.spec.js.snap     | 10 +++----
 src/popup/test/index.spec.js                  | 15 +++++++---
 .../test/__snapshots__/index.spec.js.snap     | 10 +++----
 6 files changed, 45 insertions(+), 41 deletions(-)

diff --git a/src/action-sheet/test/index.spec.js b/src/action-sheet/test/index.spec.js
index f1b147d4a..a56b9c82f 100644
--- a/src/action-sheet/test/index.spec.js
+++ b/src/action-sheet/test/index.spec.js
@@ -1,4 +1,4 @@
-import { mount } from '../../../test/utils';
+import { mount, later } from '../../../test/utils';
 import ActionSheet from '..';
 
 test('callback events', () => {
@@ -41,7 +41,7 @@ test('callback events', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
-test('click overlay and close', () => {
+test('click overlay and close', async () => {
   const onInput = jest.fn();
   const onClickOverlay = jest.fn();
   const div = document.createElement('div');
@@ -71,6 +71,8 @@ test('click overlay and close', () => {
     }
   });
 
+  await later();
+
   div.querySelector('.van-overlay').click();
   expect(onInput).toHaveBeenCalledWith(false);
   expect(onClickOverlay).toHaveBeenCalledTimes(1);
diff --git a/src/dropdown-menu/test/__snapshots__/index.spec.js.snap b/src/dropdown-menu/test/__snapshots__/index.spec.js.snap
index 4c0a26080..fe1604393 100644
--- a/src/dropdown-menu/test/__snapshots__/index.spec.js.snap
+++ b/src/dropdown-menu/test/__snapshots__/index.spec.js.snap
@@ -5,7 +5,8 @@ exports[`click option 1`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style=""><div class="van-ellipsis">B</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none; z-index: 2011;" name="van-popup-slide-top">
+    <div class="van-overlay" style="z-index: 2011; animation-duration: 0.2s; position: absolute;" name="van-fade"></div>
+    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none; z-index: 2012;" name="van-popup-slide-top">
       <div class="van-cell van-cell--clickable" style="">
         <div class="van-cell__title"><span>A</span></div>
       </div>
@@ -27,7 +28,6 @@ exports[`close-on-click-outside 1`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style=""><div class="van-ellipsis">A</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-overlay" style="z-index: 2006; position: absolute; animation-duration: 0.2s; display: none;" name="van-fade"></div>
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
       <div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
         <div class="van-cell__title"><span>A</span></div>
@@ -86,7 +86,6 @@ exports[`disable close-on-click-outside 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);"><div class="van-ellipsis">A</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-overlay" style="z-index: 2008; position: absolute; animation-duration: 0.2s;" name="van-fade"></div>
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
       <div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
         <div class="van-cell__title"><span>A</span></div>
@@ -118,7 +117,6 @@ exports[`render option icon 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);"><div class="van-ellipsis">A</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-overlay" style="z-index: 2004; position: absolute; animation-duration: 0.2s;" name="van-fade"></div>
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
       <div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);"><i class="van-icon van-icon-success van-cell__left-icon">
           <!----></i>
@@ -143,7 +141,6 @@ 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);"><div class="van-ellipsis">A</div></span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-overlay" style="z-index: 2000; position: absolute; animation-duration: 0.2s;" name="van-fade"></div>
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
       <div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
         <div class="van-cell__title"><span>A</span></div>
@@ -178,7 +175,6 @@ 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" style="z-index: 2001; position: absolute; animation-duration: 0.2s;" name="van-fade"></div>
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
       <div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
         <div class="van-cell__title"><span>A</span></div>
@@ -210,7 +206,6 @@ 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" style="z-index: 2001; position: absolute; animation-duration: 0.2s; display: none;" name="van-fade"></div>
     <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
       <div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
         <div class="van-cell__title"><span>A</span></div>
@@ -242,8 +237,8 @@ exports[`toggle method 1`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
   <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);"><div class="van-ellipsis"></div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-overlay" style="z-index: 2014; position: absolute; animation-duration: 0s;" name="van-fade"></div>
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2015;" name="van-popup-slide-top"></div>
+    <div class="van-overlay" style="z-index: 2015; animation-duration: 0s; position: absolute;" name="van-fade"></div>
+    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2016;" name="van-popup-slide-top"></div>
   </div>
 </div>
 `;
@@ -252,7 +247,7 @@ exports[`toggle method 2`] = `
 <div class="van-dropdown-menu van-hairline--top-bottom">
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style=""><div class="van-ellipsis"></div></span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2015; display: none;" name="van-popup-slide-top"></div>
+    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2016; display: none;" name="van-popup-slide-top"></div>
   </div>
 </div>
 `;
diff --git a/src/mixins/popup/index.js b/src/mixins/popup/index.js
index 3a0843376..f6f88537b 100644
--- a/src/mixins/popup/index.js
+++ b/src/mixins/popup/index.js
@@ -168,24 +168,24 @@ export const PopupMixin = {
         return;
       }
 
-      if (this.overlay) {
-        openOverlay(this, {
-          zIndex: context.zIndex++,
-          duration: this.duration,
-          className: this.overlayClass,
-          customStyle: this.overlayStyle
-        });
-      } else {
-        closeOverlay(this);
-      }
+      this.$nextTick(() => {
+        this.updateZIndex(this.overlay ? 1 : 0);
 
-      this.updateZIndex();
+        if (this.overlay) {
+          openOverlay(this, {
+            zIndex: context.zIndex++,
+            duration: this.duration,
+            className: this.overlayClass,
+            customStyle: this.overlayStyle
+          });
+        } else {
+          closeOverlay(this);
+        }
+      });
     },
 
-    updateZIndex() {
-      this.$nextTick(() => {
-        this.$el.style.zIndex = context.zIndex++;
-      });
+    updateZIndex(value = 0) {
+      this.$el.style.zIndex = ++context.zIndex + value;
     }
   }
 };
diff --git a/src/notify/test/__snapshots__/index.spec.js.snap b/src/notify/test/__snapshots__/index.spec.js.snap
index f75176b7e..25f039cc9 100644
--- a/src/notify/test/__snapshots__/index.spec.js.snap
+++ b/src/notify/test/__snapshots__/index.spec.js.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`create a notify 1`] = `<div class="van-popup van-popup--top van-notify" style="color: rgb(255, 255, 255); background: rgb(255, 68, 68); z-index: 2000;" name="van-popup-slide-top">test</div>`;
+exports[`create a notify 1`] = `<div class="van-popup van-popup--top van-notify" style="color: rgb(255, 255, 255); background: rgb(255, 68, 68); z-index: 2001;" name="van-popup-slide-top">test</div>`;
 
-exports[`notify disappear 1`] = `<div class="van-popup van-popup--top van-notify" style="color: red; z-index: 2000; background: blue;" name="van-popup-slide-top">test</div>`;
+exports[`notify disappear 1`] = `<div class="van-popup van-popup--top van-notify" style="color: red; z-index: 2001; background: blue;" name="van-popup-slide-top">test</div>`;
 
-exports[`notify disappear 2`] = `<div class="van-popup van-popup--top van-notify" style="color: red; z-index: 2000; background: blue; display: none;" name="van-popup-slide-top">test</div>`;
+exports[`notify disappear 2`] = `<div class="van-popup van-popup--top van-notify" style="color: red; z-index: 2001; background: blue; display: none;" name="van-popup-slide-top">test</div>`;
 
-exports[`notify disappear 3`] = `<div class="van-popup van-popup--top van-notify" style="color: rgb(255, 255, 255); z-index: 2001; background: rgb(255, 68, 68);" name="van-popup-slide-top">text2</div>`;
+exports[`notify disappear 3`] = `<div class="van-popup van-popup--top van-notify" style="color: rgb(255, 255, 255); z-index: 2002; background: rgb(255, 68, 68);" name="van-popup-slide-top">text2</div>`;
 
-exports[`notify disappear 4`] = `<div class="van-popup van-popup--top van-notify" style="color: rgb(255, 255, 255); z-index: 2001; background: rgb(255, 68, 68); display: none;" name="van-popup-slide-top">text2</div>`;
+exports[`notify disappear 4`] = `<div class="van-popup van-popup--top van-notify" style="color: rgb(255, 255, 255); z-index: 2002; background: rgb(255, 68, 68); display: none;" name="van-popup-slide-top">text2</div>`;
diff --git a/src/popup/test/index.spec.js b/src/popup/test/index.spec.js
index b4544b507..471bfc55f 100644
--- a/src/popup/test/index.spec.js
+++ b/src/popup/test/index.spec.js
@@ -1,5 +1,5 @@
 import Popup from '..';
-import { mount, triggerDrag } from '../../../test/utils';
+import { mount, triggerDrag, later } from '../../../test/utils';
 
 let wrapper;
 afterEach(() => {
@@ -94,7 +94,7 @@ test('get container with selector', () => {
   expect(dom2.parentNode).toEqual(wrapper.vm.$el);
 });
 
-test('render overlay', () => {
+test('render overlay', async () => {
   const div = document.createElement('div');
   wrapper = mount({
     template: `
@@ -112,10 +112,12 @@ test('render overlay', () => {
     }
   });
 
+  await later();
+
   expect(div.querySelector('.van-overlay')).toBeTruthy();
 });
 
-test('watch overlay prop', () => {
+test('watch overlay prop', async () => {
   const div = document.createElement('div');
   wrapper = mount({
     template: `
@@ -135,16 +137,19 @@ test('watch overlay prop', () => {
     }
   });
 
+  await later();
   expect(div.querySelector('.van-overlay')).toBeFalsy();
 
   wrapper.setData({ overlay: true });
+  await later();
   expect(div.querySelector('.van-overlay')).toBeFalsy();
 
   wrapper.setData({ show: true });
+  await later();
   expect(div.querySelector('.van-overlay')).toBeTruthy();
 });
 
-test('close on click overlay', () => {
+test('close on click overlay', async () => {
   const div = document.createElement('div');
   const onClickOverlay = jest.fn();
 
@@ -172,6 +177,8 @@ test('close on click overlay', () => {
     }
   });
 
+  await later();
+
   const modal = div.querySelector('.van-overlay');
   triggerDrag(modal, 0, -30);
   modal.click();
diff --git a/src/toast/test/__snapshots__/index.spec.js.snap b/src/toast/test/__snapshots__/index.spec.js.snap
index 3128a0b2d..14fe3a233 100644
--- a/src/toast/test/__snapshots__/index.spec.js.snap
+++ b/src/toast/test/__snapshots__/index.spec.js.snap
@@ -1,26 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`create a forbidClick toast 1`] = `
-<div class="van-toast van-toast--middle" style="z-index: 2000;" name="van-fade"><i class="van-icon van-icon-success van-toast__icon">
+<div class="van-toast van-toast--middle" style="z-index: 2001;" name="van-fade"><i class="van-icon van-icon-success van-toast__icon">
     <!----></i></div>
 `;
 
 exports[`icon prop 1`] = `
-<div class="van-toast van-toast--middle" style="z-index: 2004;" name="van-fade"><i class="van-icon van-icon-star-o van-toast__icon">
+<div class="van-toast van-toast--middle" style="z-index: 2005;" name="van-fade"><i class="van-icon van-icon-star-o van-toast__icon">
     <!----></i>
   <div class="van-toast__text">Message</div>
 </div>
 `;
 
 exports[`icon-prefix prop 1`] = `
-<div class="van-toast van-toast--middle" style="z-index: 2005;" name="van-fade"><i class="my-icon my-icon-star-o van-toast__icon">
+<div class="van-toast van-toast--middle" style="z-index: 2006;" name="van-fade"><i class="my-icon my-icon-star-o van-toast__icon">
     <!----></i>
   <div class="van-toast__text">Message</div>
 </div>
 `;
 
 exports[`show html toast 1`] = `
-<div class="van-toast van-toast--middle van-toast--text" style="z-index: 2003;" name="van-fade">
+<div class="van-toast van-toast--middle van-toast--text" style="z-index: 2004;" name="van-fade">
   <div class="van-toast__text">
     <div>Message</div>
   </div>
@@ -28,7 +28,7 @@ exports[`show html toast 1`] = `
 `;
 
 exports[`show loading toast 1`] = `
-<div class="van-toast van-toast--middle" style="z-index: 2002;" name="van-fade">
+<div class="van-toast van-toast--middle" style="z-index: 2003;" name="van-fade">
   <div class="van-loading van-loading--circular van-toast__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: white;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
   <div class="van-toast__text">Message</div>
 </div>