fix(button): is focused after click with :focusable="false", closes #…

…3071
tusen-ai · Jun 10, 2022 · 7063b04 · 7063b04
1 parent 9bd1fdc
commit 7063b04
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -2,6 +2,10 @@
 
 ## NEXT_VERSION
 
+### Fixes
+
+- Fix `n-button` is focused after click with `:focusable="false"`, closes [#3071](https://github.com/TuSimple/naive-ui/issues/3071).
+
 ### Feats
 
 - `n-tree-select` adds `arrow` slot, closes [#3084](https://github.com/TuSimple/naive-ui/issues/3084).

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -2,6 +2,10 @@
 
 ## NEXT_VERSION
 
+### Fixes
+
+- 修复 `n-button` 在设定 `:focusable="false"` 后点击仍然会聚焦，关闭 [#3071](https://github.com/TuSimple/naive-ui/issues/3071)
+
 ### Feats
 
 - `n-tree-select` 新增 `arrow` slot，关闭 [#3084](https://github.com/TuSimple/naive-ui/issues/3084)

diff --git a/src/button/src/Button.tsx b/src/button/src/Button.tsx
@@ -142,11 +142,16 @@ const Button = defineComponent({
       return props.focusable && !props.disabled
     })
     const handleMousedown = (e: MouseEvent): void => {
-      if (props.disabled || props.nativeFocusBehavior) {
+      if (props.nativeFocusBehavior) {
+        return
+      }
+      e.preventDefault()
+      // normally this won't be called if disabled (when tag is button)
+      // if not, we try to make it behave like a button
+      if (props.disabled) {
         return
       }
       if (mergedFocusableRef.value) {
-        e.preventDefault()
         selfElRef.value?.focus({ preventScroll: true })
       }
     }