fix(modal): can't be closed when using custom content, closes #788

CHANGELOG.en-US.md

@@ -14,6 +14,7 @@
 - Fix `n-data-table` `onUpdatePage` and `onUpdatePageSize` not triggered while using jsx.
 - Fix `n-progress`'s `percentage` prop exception in default.
 - Fix `n-select` hide close icon when option is disabled.
+- Fix `n-modal` can't be closed when using custom content, closes [#788](https://github.com/TuSimple/naive-ui/issues/788).
 
 ## 2.16.0 (2021-08-02)
 

CHANGELOG.zh-CN.md

@@ -14,6 +14,7 @@
 - 修复 `n-data-table` `onUpdatePage` 和 `onUpdatePageSize` 在使用 jsx 时不触发的问题
 - 修复 `n-progress` 的 `percentage` 属性默认值异常
 - 修复 `n-select` 当选项禁用时需要隐藏关闭图标
+- 修复 `n-modal` 使用自定义内容无法正常关闭，关闭 [#788](https://github.com/TuSimple/naive-ui/issues/788)
 
 ## 2.16.0 (2021-08-02)
 

src/modal/demos/zhCN/index.demo-entry.md

@@ -12,6 +12,7 @@ custom-position
 preset-card
 preset-confirm
 preset-confirm-slot
+raw-debug
 dark-1-debug
 dark-2-debug
 dark-3-debug

src/modal/demos/zhCN/raw-debug.demo.md

@@ -0,0 +1,20 @@
+# Raw Debug
+
+```html
+<n-button @click="showModal = true"> 来吧 </n-button>
+<n-modal v-model:show="showModal">
+  <div class="box1">
+    <div class="box2">123</div>
+  </div>
+</n-modal>
+```
+
+```js
+export default {
+  data () {
+    return {
+      showModal: false
+    }
+  }
+}
+```

src/modal/src/BodyWrapper.tsx

@@ -13,7 +13,8 @@ import {
   Transition,
   VNode,
   ComponentPublicInstance,
-  mergeProps
+  mergeProps,
+  cloneVNode
 } from 'vue'
 import { clickoutside } from 'vdirs'
 import { dialogPropKeys } from '../../dialog/src/Dialog'
@@ -173,6 +174,7 @@ export default defineComponent({
         warn('modal', 'default slot is empty')
         return
       }
+      childNode = cloneVNode(childNode)
       childNode.props = mergeProps(
         {
           class: `${mergedClsPrefix}-modal`

src/modal/src/Modal.tsx

@@ -28,10 +28,7 @@ import style from './styles/index.cssr'
 
 const modalProps = {
   ...(useTheme.props as ThemeProps<ModalTheme>),
-  show: {
-    type: Boolean,
-    default: false
-  },
+  show: Boolean,
   unstableShowMask: {
     type: Boolean,
     default: true