fix(color-picker): can't be closed if mousedown.stop is set when clic…

…k outside, closes #2709
tusen-ai · Apr 10, 2022 · 0b67751 · 0b67751
1 parent aaa0aa6
commit 0b67751
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 2 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -18,6 +18,7 @@
 - Fix `n-step` has unexpected theme variable class.
 - Fix `n-steps` displays uncorrectly when nested in vertical & horizontal mode.
 - Fix `n-popconfirm`'s `positive-text` & `negetive-text` props don't allow `null` type.
+- Fix `n-color-picker` can't be closed if mousedown.stop is set when click outside, closes [#2709](https://github.com/TuSimple/naive-ui/issues/2709).
 
 ### Feats
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -18,6 +18,7 @@
 - 修复 `n-step` 有多余的主题变量类名
 - 修复 `n-steps` 垂直水平相互嵌套样式错乱
 - 修复 `n-popconfirm` 的 `positive-text` & `negetive-text` 不允许 `null` 类型
+- 修复 `n-color-picker` 的面板关闭会被 `mousedown.stop` 阻止，关闭 [#2709](https://github.com/TuSimple/naive-ui/issues/2709)
 
 ### Feats
 

diff --git a/package.json b/package.json
@@ -140,7 +140,7 @@
     "lodash-es": "^4.17.21",
     "seemly": "^0.3.3",
     "treemate": "^0.3.10",
-    "vdirs": "^0.1.7",
+    "vdirs": "^0.1.8",
     "vfonts": "^0.0.3",
     "vooks": "^0.2.12",
     "vueuc": "^0.4.28"

diff --git a/src/color-picker/demos/zhCN/close-debug.demo.vue b/src/color-picker/demos/zhCN/close-debug.demo.vue
@@ -0,0 +1,10 @@
+<markdown>
+# Close debug
+
+</markdown>
+<template>
+  <n-color-picker />
+  <n-button style="margin-left: 120px" @mousedown.stop>
+    Stop mousedown
+  </n-button>
+</template>
diff --git a/src/color-picker/demos/zhCN/index.demo-entry.md b/src/color-picker/demos/zhCN/index.demo-entry.md
@@ -13,6 +13,7 @@ modes.vue
 form.vue
 swatches.vue
 native.vue
+close-debug.vue
 ```
 
 ## API

diff --git a/src/color-picker/src/ColorPicker.tsx b/src/color-picker/src/ColorPicker.tsx
@@ -706,7 +706,12 @@ export default defineComponent({
                         default: () =>
                           this.mergedShow
                             ? withDirectives(this.renderPanel(), [
-                              [clickoutside, this.handleClickOutside]
+                              [
+                                clickoutside,
+                                this.handleClickOutside,
+                                undefined as any as string,
+                                { capture: true }
+                              ]
                             ])
                             : null
                       }}