fix(dialog): prevent unintended closure of nested dialogs (youzan#5907)

landluck · Oct 14, 2024 · 6593a39 · 6593a39
1 parent 3a5f14d
commit 6593a39
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 64 deletions.
diff --git a/packages/dialog/index.ts b/packages/dialog/index.ts
@@ -98,17 +98,22 @@ VantComponent({
       this.close('overlay');
     },
 
-    close(action) {
+    close(action: string) {
       this.setData({ show: false });
 
-      wx.nextTick(() => {
-        this.$emit('close', action);
+      this.closeAction = action;
+    },
 
-        const { callback } = this.data;
-        if (callback) {
-          callback(action, this);
-        }
-      });
+    onAfterLeave() {
+      const { closeAction: action } = this;
+
+      this.$emit('close', action);
+
+      const { callback } = this.data;
+
+      if (callback) {
+        callback(action, this);
+      }
     },
 
     stopLoading() {

diff --git a/packages/dialog/index.wxml b/packages/dialog/index.wxml
@@ -11,6 +11,7 @@
   close-on-click-overlay="{{ closeOnClickOverlay }}"
   root-portal="{{ rootPortal }}"
   bind:close="onClickOverlay"
+  bind:after-leave="onAfterLeave"
 >
   <view
     wx:if="{{ title || useTitleSlot  }}"

diff --git a/packages/dialog/test/__snapshots__/demo.spec.ts.snap b/packages/dialog/test/__snapshots__/demo.spec.ts.snap
@@ -265,6 +265,7 @@ exports[`should render demo and match snapshot 1`] = `
   >
     <van-popup
       customClass="van-dialog van-dialog--default custom-class"
+      bind:after-leave="onAfterLeave"
       bind:close="onClickOverlay"
     >
       <van-overlay
@@ -281,6 +282,7 @@ exports[`should render demo and match snapshot 1`] = `
   <van-dialog>
     <van-popup
       customClass="van-dialog van-dialog--default custom-class"
+      bind:after-leave="onAfterLeave"
       bind:close="onClickOverlay"
     >
       <van-overlay

diff --git a/packages/mixins/transition.ts b/packages/mixins/transition.ts
@@ -48,89 +48,101 @@ export function transition(showDefaultValue: boolean) {
           return;
         }
 
-        value ? this.enter() : this.leave();
+        value ? this.enureEnter() : this.enureLeave();
       },
 
-      enter() {
-        if (this.enterFinishedPromise) return;
-        this.enterFinishedPromise = new Promise((resolve) => {
-          const { duration, name } = this.data;
-          const classNames = getClassNames(name);
-          const currentDuration = isObj(duration) ? duration.enter : duration;
+      enureEnter() {
+        if (this.enterPromise) return;
 
-          if (this.status === 'enter') {
+        this.enterPromise = new Promise((resolve) => this.enter(resolve));
+      },
+
+      enureLeave() {
+        const { enterPromise } = this;
+
+        if (!enterPromise) return;
+
+        enterPromise
+          .then(() => new Promise((resolve) => this.leave(resolve)))
+          .then(() => {
+            this.enterPromise = null;
+          });
+      },
+
+      enter(resolve: () => void) {
+        const { duration, name } = this.data;
+        const classNames = getClassNames(name);
+        const currentDuration = isObj(duration) ? duration.enter : duration;
+
+        if (this.status === 'enter') {
+          return;
+        }
+
+        this.status = 'enter';
+        this.$emit('before-enter');
+
+        requestAnimationFrame(() => {
+          if (this.status !== 'enter') {
             return;
           }
 
-          this.status = 'enter';
-          this.$emit('before-enter');
+          this.$emit('enter');
+
+          this.setData({
+            inited: true,
+            display: true,
+            classes: classNames.enter,
+            currentDuration,
+          });
 
           requestAnimationFrame(() => {
             if (this.status !== 'enter') {
               return;
             }
 
-            this.$emit('enter');
-
-            this.setData({
-              inited: true,
-              display: true,
-              classes: classNames.enter,
-              currentDuration,
-            });
-
-            requestAnimationFrame(() => {
-              if (this.status !== 'enter') {
-                return;
-              }
-
-              this.transitionEnded = false;
-              this.setData({ classes: classNames['enter-to'] });
-              resolve();
-            });
+            this.transitionEnded = false;
+            this.setData({ classes: classNames['enter-to'] });
+            resolve();
           });
         });
       },
 
-      leave() {
-        if (!this.enterFinishedPromise) return;
-        this.enterFinishedPromise.then(() => {
-          if (!this.data.display) {
+      leave(resolve: () => void) {
+        if (!this.data.display) {
+          return;
+        }
+
+        const { duration, name } = this.data;
+        const classNames = getClassNames(name);
+        const currentDuration = isObj(duration) ? duration.leave : duration;
+
+        this.status = 'leave';
+        this.$emit('before-leave');
+
+        requestAnimationFrame(() => {
+          if (this.status !== 'leave') {
             return;
           }
 
-          const { duration, name } = this.data;
-          const classNames = getClassNames(name);
-          const currentDuration = isObj(duration) ? duration.leave : duration;
+          this.$emit('leave');
 
-          this.status = 'leave';
-          this.$emit('before-leave');
+          this.setData({
+            classes: classNames.leave,
+            currentDuration,
+          });
 
           requestAnimationFrame(() => {
             if (this.status !== 'leave') {
               return;
             }
 
-            this.$emit('leave');
-
-            this.setData({
-              classes: classNames.leave,
-              currentDuration,
-            });
-
-            requestAnimationFrame(() => {
-              if (this.status !== 'leave') {
-                return;
-              }
-
-              this.transitionEnded = false;
-              setTimeout(() => {
-                this.onTransitionEnd();
-                this.enterFinishedPromise = null;
-              }, currentDuration);
+            this.transitionEnded = false;
+            setTimeout(() => {
+              this.onTransitionEnd();
+              resolve();
+            }, currentDuration);
 
-              this.setData({ classes: classNames['leave-to'] });
-            });
+            this.setData({ classes: classNames['leave-to'] });
           });
         });
       },

diff --git a/packages/swipe-cell/test/__snapshots__/demo.spec.ts.snap b/packages/swipe-cell/test/__snapshots__/demo.spec.ts.snap
@@ -245,6 +245,7 @@ exports[`should render demo and match snapshot 1`] = `
   <van-dialog>
     <van-popup
       customClass="van-dialog van-dialog--default custom-class"
+      bind:after-leave="onAfterLeave"
       bind:close="onClickOverlay"
     >
       <van-overlay

diff --git a/packages/switch/test/__snapshots__/demo.spec.ts.snap b/packages/switch/test/__snapshots__/demo.spec.ts.snap
@@ -166,6 +166,7 @@ exports[`should render demo and match snapshot 1`] = `
   <van-dialog>
     <van-popup
       customClass="van-dialog van-dialog--default custom-class"
+      bind:after-leave="onAfterLeave"
       bind:close="onClickOverlay"
     >
       <van-overlay