From a7fb5f732e1853824e21d32e5c4e34b3691b300b Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Mon, 15 Mar 2021 19:56:53 +0800
Subject: [PATCH] feat(Popover): add close-on-click-overlay prop (#8351)

---
 src/popover/Popover.tsx         | 11 ++++++++++-
 src/popover/README.md           |  1 +
 src/popover/README.zh-CN.md     |  1 +
 src/popover/test/index.spec.tsx | 14 ++++++++++++++
 4 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/popover/Popover.tsx b/src/popover/Popover.tsx
index 219e48024..ac2c03e0d 100644
--- a/src/popover/Popover.tsx
+++ b/src/popover/Popover.tsx
@@ -81,6 +81,10 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    closeOnClickOverlay: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   emits: ['select', 'touchstart', 'update:show'],
@@ -153,7 +157,11 @@ export default defineComponent({
       }
     };
 
-    const onClickAway = () => updateShow(false);
+    const onClickAway = () => {
+      if (!props.overlay || props.closeOnClickOverlay) {
+        updateShow(false);
+      }
+    };
 
     const renderAction = (action: PopoverAction, index: number) => {
       const { icon, text, color, disabled, className } = action;
@@ -197,6 +205,7 @@ export default defineComponent({
           transition="van-popover-zoom"
           lockScroll={false}
           onTouchstart={onTouchstart}
+          closeOnClickOverlay={props.closeOnClickOverlay}
           {...{ ...attrs, 'onUpdate:show': updateShow }}
         >
           <div class={bem('arrow')} />
diff --git a/src/popover/README.md b/src/popover/README.md
index 03b7a432d..9f36a85a4 100644
--- a/src/popover/README.md
+++ b/src/popover/README.md
@@ -213,6 +213,7 @@ export default {
 | overlay | Whether to show overlay | _boolean_ | `false` |
 | close-on-click-action | Whether to close when clicking action | _boolean_ | `true` |
 | close-on-click-outside | Whether to close when clicking outside | _boolean_ | `true` |
+| close-on-click-overlay `v3.0.10` | Whether to close when clicking overlay | _boolean_ | `true` |
 | teleport | Return the mount node for Popover | _string \| Element_ | `body` |
 
 ### Data Structure of Action
diff --git a/src/popover/README.zh-CN.md b/src/popover/README.zh-CN.md
index 08a2fb8aa..1da585d1e 100644
--- a/src/popover/README.zh-CN.md
+++ b/src/popover/README.zh-CN.md
@@ -227,6 +227,7 @@ export default {
 | overlay | 是否显示遮罩层 | _boolean_ | `false` |
 | close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `true` |
 | close-on-click-outside | 是否在点击外部元素后关闭菜单 | _boolean_ | `true` |
+| close-on-click-overlay `v3.0.10` | 是否在点击遮罩层后关闭菜单 | _boolean_ | `true` |
 | teleport | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| Element_ | `body` |
 
 ### Action 数据结构
diff --git a/src/popover/test/index.spec.tsx b/src/popover/test/index.spec.tsx
index 76ac06f5b..3a9701b0b 100644
--- a/src/popover/test/index.spec.tsx
+++ b/src/popover/test/index.spec.tsx
@@ -161,3 +161,17 @@ test('should emit click-overlay event when overlay is clicked', () => {
   wrapper.find('.van-overlay').trigger('click');
   expect(onClickOverlay).toHaveBeenCalledTimes(1);
 });
+
+test('should not close Popover when overlay is clicked and close-on-click-overlay is false', () => {
+  const wrapper = mount(Popover, {
+    props: {
+      show: true,
+      overlay: true,
+      closeOnClickOverlay: false,
+    },
+  });
+
+  const overlay = document.querySelector('.van-overlay')!;
+  trigger(overlay, 'touchstart');
+  expect(wrapper.emitted('update:show')).toBeFalsy();
+});