fix(modal): when many instances are activated at same time, `on-mask-…

…click` will be triggered on every modal even only one mask is clicked #3147
tusen-ai · Jun 21, 2022 · ac37052 · ac37052
1 parent a89f8b1
commit ac37052
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 43 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -7,6 +7,7 @@
 - Fix `n-color-picker` can't input alpha value correctly manually.
 - Fix some components don't work correctly if `__VUE_OPTIONS_API__` is set to `false`, closes [#3146](https://github.com/TuSimple/naive-ui/issues/3146).
 - Fix `n-grid` doesn't adjust it's content to fit responsive config in SSR page, closes [#2462](https://github.com/TuSimple/naive-ui/issues/2462).
+- Fix `n-modal` when many instances are activated at same time, `on-mask-click` will be triggered on every modal even only one mask is clicked [#3147](https://github.com/TuSimple/naive-ui/issues/3147).
 
 ## 2.30.5
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -7,6 +7,7 @@
 - 修复 `n-color-picker` 手动输入 alpha 值时不生效
 - 修复某些组件在 `__VUE_OPTIONS_API__` 设为 `false` 时工作不正常的问题，关闭 [#3146](https://github.com/TuSimple/naive-ui/issues/3146)
 - 修复 `n-grid` 在 SSR 页面挂载后不会正确的适配响应式，关闭 [#2462](https://github.com/TuSimple/naive-ui/issues/2462)
+- 修复 `n-modal` 在同时打开多个的时候点击某个遮罩，`on-mask-click` 会对每一个都触发，关闭 [#3147](https://github.com/TuSimple/naive-ui/issues/3147)
 
 ## 2.30.5
 

diff --git a/src/modal/demos/zhCN/index.demo-entry.md b/src/modal/demos/zhCN/index.demo-entry.md
@@ -27,6 +27,7 @@ dark-7-debug.vue
 dark-8-debug.vue
 dark-9-debug.vue
 dark-10-debug.vue
+mask-click-debug.vue
 ```
 
 ## API

diff --git a/src/modal/demos/zhCN/mask-click-debug.demo.vue b/src/modal/demos/zhCN/mask-click-debug.demo.vue
@@ -0,0 +1,74 @@
+<markdown>
+# Mask click debug
+</markdown>
+
+<template>
+  <n-space justify="center">
+    <NButton type="primary" @click="showModalOne = true">
+      Show Modal One
+    </NButton>
+  </n-space>
+  <n-modal
+    :show="showModalOne"
+    preset="dialog"
+    title="Modal One"
+    type="success"
+    @mask-click="handleCloseOne"
+  >
+    <n-space vertical justify="center">
+      <NButton type="info" @click="showModalTwo = true">
+        Show Modal Two
+      </NButton>
+      <n-image
+        width="100"
+        src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+        preview-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+      />
+      try to show the second modal
+    </n-space>
+  </n-modal>
+  <n-modal
+    :show="showModalTwo"
+    preset="dialog"
+    title="Modal Two"
+    type="info"
+    @mask-click="handleCloseTwo"
+  >
+    try to click the mask
+  </n-modal>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue'
+import { NSpace, NButton, NModal, NImage } from 'naive-ui'
+
+export default {
+  name: 'App',
+  components: {
+    NSpace,
+    NButton,
+    NModal,
+    NImage
+  },
+  setup () {
+    const showModalOne = ref(false)
+    const showModalTwo = ref(false)
+
+    function handleCloseOne () {
+      showModalOne.value = false
+    }
+    function handleCloseTwo () {
+      showModalTwo.value = false
+    }
+
+    return {
+      showModalOne,
+      showModalTwo,
+      handleCloseOne,
+      handleCloseTwo
+    }
+  }
+}
+</script>
+
+<style></style>
diff --git a/src/modal/src/BodyWrapper.tsx b/src/modal/src/BodyWrapper.tsx
@@ -15,7 +15,9 @@ import {
   ComponentPublicInstance,
   mergeProps,
   cloneVNode,
-  computed
+  computed,
+  DirectiveArguments,
+  VNodeChild
 } from 'vue'
 import { clickoutside } from 'vdirs'
 import { VFocusTrap } from 'vueuc'
@@ -53,11 +55,9 @@ export default defineComponent({
     },
     blockScroll: Boolean,
     ...presetProps,
+    renderMask: Function as PropType<() => VNodeChild>,
     // events
-    onClickoutside: {
-      type: Function,
-      required: true
-    },
+    onClickoutside: Function as PropType<(e: MouseEvent) => void>,
     onBeforeLeave: {
       type: Function,
       required: true
@@ -153,9 +153,6 @@ export default defineComponent({
     function handlePositiveClick (): void {
       props.onPositiveClick()
     }
-    function handleClickOutside (e: MouseEvent): void {
-      props.onClickoutside(e)
-    }
     const childNodeRef = ref<VNode | null>(null)
     watch(childNodeRef, (node) => {
       if (node) {
@@ -179,7 +176,6 @@ export default defineComponent({
       scrollbarRef,
       displayed: displayedRef,
       childNodeRef,
-      handleClickOutside,
       handlePositiveClick,
       handleNegativeClick,
       handleCloseClick,
@@ -195,7 +191,6 @@ export default defineComponent({
       handleEnter,
       handleAfterLeave,
       handleBeforeLeave,
-      handleClickOutside,
       preset,
       mergedClsPrefix
     } = this
@@ -225,7 +220,8 @@ export default defineComponent({
               contentClass={`${mergedClsPrefix}-modal-scroll-content`}
             >
               {{
-                default: () => (
+                default: () => [
+                  this.renderMask?.(),
                   <VFocusTrap
                     disabled={!this.trapFocus}
                     active={this.show}
@@ -243,8 +239,20 @@ export default defineComponent({
                           onBeforeLeave={handleBeforeLeave as any}
                         >
                           {{
-                            default: () =>
-                              withDirectives(
+                            default: () => {
+                              const dirs: DirectiveArguments = [
+                                [vShow, this.show]
+                              ]
+                              const { onClickoutside } = this
+                              if (onClickoutside) {
+                                dirs.push([
+                                  clickoutside,
+                                  this.onClickoutside,
+                                  undefined as unknown as string,
+                                  { capture: true }
+                                ])
+                              }
+                              return withDirectives(
                                 (this.preset === 'confirm' ||
                                 this.preset === 'dialog' ? (
                                   <NDialog
@@ -284,22 +292,15 @@ export default defineComponent({
                                     ) : (
                                       (this.childNodeRef = childNode)
                                     )) as any,
-                                [
-                                  [vShow, this.show],
-                                  [
-                                    clickoutside,
-                                    handleClickOutside,
-                                    undefined as unknown as string,
-                                    { capture: true }
-                                  ]
-                                ]
+                                dirs
                               )
+                            }
                           }}
                         </Transition>
                       )
                     }}
                   </VFocusTrap>
-                )
+                ]
               }}
             </NScrollbar>
           </div>,

diff --git a/src/modal/src/Modal.tsx b/src/modal/src/Modal.tsx
@@ -279,6 +279,7 @@ export default defineComponent({
         {{
           default: () => {
             this.onRender?.()
+            const { unstableShowMask } = this
             return withDirectives(
               <div
                 role="none"
@@ -290,25 +291,6 @@ export default defineComponent({
                 ]}
                 style={this.cssVars as CSSProperties}
               >
-                {this.unstableShowMask ? (
-                  <Transition
-                    name="fade-in-transition"
-                    key="mask"
-                    appear={this.internalAppear ?? this.isMounted}
-                  >
-                    {{
-                      default: () => {
-                        return this.show ? (
-                          <div
-                            aria-hidden
-                            ref="containerRef"
-                            class={`${mergedClsPrefix}-modal-mask`}
-                          />
-                        ) : null
-                      }
-                    }}
-                  </Transition>
-                ) : null}
                 <NModalBodyWrapper
                   style={this.overlayStyle}
                   {...this.$attrs}
@@ -327,7 +309,33 @@ export default defineComponent({
                   onBeforeLeave={this.handleBeforeLeave}
                   onAfterEnter={this.onAfterEnter}
                   onAfterLeave={this.handleAfterLeave}
-                  onClickoutside={this.handleClickoutside}
+                  onClickoutside={
+                    unstableShowMask ? undefined : this.handleClickoutside
+                  }
+                  renderMask={
+                    unstableShowMask
+                      ? () => (
+                          <Transition
+                            name="fade-in-transition"
+                            key="mask"
+                            appear={this.internalAppear ?? this.isMounted}
+                          >
+                            {{
+                              default: () => {
+                                return this.show ? (
+                                  <div
+                                    aria-hidden
+                                    ref="containerRef"
+                                    class={`${mergedClsPrefix}-modal-mask`}
+                                    onClick={this.handleClickoutside}
+                                  />
+                                ) : null
+                              }
+                            }}
+                          </Transition>
+                        )
+                      : undefined
+                  }
                 >
                   {this.$slots}
                 </NModalBodyWrapper>