fix(Popup): should not call before-close when show prop becomes false (#9291)

src/dialog/Dialog.tsx

@@ -1,4 +1,4 @@
-import { ref, PropType, reactive, defineComponent } from 'vue';
+import { PropType, reactive, defineComponent } from 'vue';
 
 // Utils
 import {
@@ -68,16 +68,10 @@ export default defineComponent({
       cancel: false,
     });
 
-    const popupRef = ref();
-
     const updateShow = (value: boolean) => emit('update:show', value);
 
     const close = (action: DialogAction) => {
-      if (popupRef.value) {
+      updateShow(false);
-        popupRef.value.triggerClose();
-      } else {
-        updateShow(false);
-      }
 
       if (props.callback) {
         props.callback(action);
@@ -228,7 +222,6 @@ export default defineComponent({
       const { width, title, theme, message, className } = props;
       return (
         <Popup
-          ref={popupRef}
           role="dialog"
           class={[bem([theme]), className]}
           style={{ width: addUnit(width) }}

src/image-preview/test/index.spec.ts

@@ -215,7 +215,6 @@ test('before close prop', async () => {
   expect(wrapper.emitted('close')).toBeFalsy();
 
   await wrapper.setProps({ show: false });
-  expect(wrapper.emitted('update:show')![0]).toBeTruthy();
   expect(wrapper.emitted('close')![0]).toBeTruthy();
 });
 

src/popup/Popup.tsx

@@ -115,17 +115,15 @@ export default defineComponent({
       }
     };
 
-    const triggerClose = () => {
-      opened = false;
-      emit('close');
-      emit('update:show', false);
-    };
-
     const close = () => {
       if (opened) {
         callInterceptor({
           interceptor: props.beforeClose,
-          done: triggerClose,
+          done() {
+            opened = false;
+            emit('close');
+            emit('update:show', false);
+          },
         });
       }
     };
@@ -224,12 +222,13 @@ export default defineComponent({
         if (value) {
           open();
         } else {
-          close();
+          opened = false;
+          emit('close');
         }
       }
     );
 
-    useExpose({ popupRef, triggerClose });
+    useExpose({ popupRef });
 
     useLockScroll(popupRef, () => props.show && props.lockScroll);
 

src/popup/test/index.spec.js

@@ -230,3 +230,16 @@ test('should allow to prevent close with before-close prop', async () => {
   await wrapper.find('.van-overlay').trigger('click');
   expect(wrapper.emitted('update:show')[0]).toEqual([false]);
 });
+
+test('should not call before-close when show prop becomes false', async () => {
+  const beforeClose = jest.fn();
+  const wrapper = mount(Popup, {
+    props: {
+      show: true,
+      beforeClose,
+    },
+  });
+
+  await wrapper.setProps({ show: false });
+  expect(beforeClose).toHaveBeenCalledTimes(0);
+});