fix(button): will trigger click event twice if pressed, closes #1626

tusen-ai · Nov 21, 2021 · 4b70c31 · 4b70c31
1 parent 9b0c691
commit 4b70c31
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 18 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -36,6 +36,7 @@
 - Fix `n-dropdown` animation flicker problem, closes [#1600](https://github.com/TuSimple/naive-ui/issues/1600).
 - Fix `n-data-table`’s `clearSorter` method isn't exported properly.
 - Fix `n-global-style` throws error in SSR.
+- Fix `n-button` will trigger click event twice if pressed, closes [#1626](https://github.com/TuSimple/naive-ui/issues/1626).
 
 ## 2.20.3 (2021-11-15)
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -31,11 +31,12 @@
 ### Fixes
 
 - 修复 `suffix` 内部组件 `loading` 属性的默认值
-- 修复 `n-space` 没有子节点的时候还被展示，关闭 [#1605](https://github.com/TuSimple/naive-ui/issues/1605).
+- 修复 `n-space` 没有子节点的时候还被展示，关闭 [#1605](https://github.com/TuSimple/naive-ui/issues/1605)
 - 修复 `n-radio` 缺少 `onUpdateChecked` 属性
-- 修复 `n-dropdown` 动画闪烁问题，关闭 [#1600](https://github.com/TuSimple/naive-ui/issues/1600).
+- 修复 `n-dropdown` 动画闪烁问题，关闭 [#1600](https://github.com/TuSimple/naive-ui/issues/1600)
 - 修复 `n-data-table` 的 `clearSorter` 方法没有被正常导出
 - 修复 `n-global-style` SSR 报错
+- 修复 `n-button` 按下 Enter 会出发两次 click 时间 [#1626](https://github.com/TuSimple/naive-ui/issues/1626)
 
 ## 2.20.3 (2021-11-15)
 

diff --git a/src/button/src/Button.tsx b/src/button/src/Button.tsx
@@ -3,7 +3,6 @@ import {
   ref,
   computed,
   inject,
-  nextTick,
   defineComponent,
   PropType,
   renderSlot,
@@ -134,7 +133,7 @@ const Button = defineComponent({
     const mergedFocusableRef = computed(() => {
       return props.focusable && !props.disabled
     })
-    const handleMouseDown = (e: MouseEvent): void => {
+    const handleMousedown = (e: MouseEvent): void => {
       e.preventDefault()
       if (props.disabled) {
         return
@@ -155,23 +154,17 @@ const Button = defineComponent({
         }
       }
     }
-    const handleKeyUp = (e: KeyboardEvent): void => {
+    const handleKeyup = (e: KeyboardEvent): void => {
       switch (e.code) {
         case 'Enter':
         case 'NumpadEnter':
           if (!props.keyboard) {
-            e.preventDefault()
             return
           }
           enterPressedRef.value = false
-          void nextTick(() => {
-            if (!props.disabled) {
-              selfRef.value?.click()
-            }
-          })
       }
     }
-    const handleKeyDown = (e: KeyboardEvent): void => {
+    const handleKeydown = (e: KeyboardEvent): void => {
       switch (e.code) {
         case 'Enter':
         case 'NumpadEnter':
@@ -208,10 +201,10 @@ const Button = defineComponent({
       showBorder: showBorderRef,
       enterPressed: enterPressedRef,
       rtlEnabled: rtlEnabledRef,
-      handleMouseDown,
-      handleKeyDown,
+      handleMousedown,
+      handleKeydown,
       handleBlur,
-      handleKeyUp,
+      handleKeyup,
       handleClick,
       customColorCssVars: computed(() => {
         const { color } = props
@@ -524,9 +517,9 @@ const Button = defineComponent({
         disabled={this.disabled}
         onClick={this.handleClick}
         onBlur={this.handleBlur}
-        onMousedown={this.handleMouseDown}
-        onKeyup={this.handleKeyUp}
-        onKeydown={this.handleKeyDown}
+        onMousedown={this.handleMousedown}
+        onKeyup={this.handleKeyup}
+        onKeydown={this.handleKeydown}
       >
         {$slots.default && this.iconPlacement === 'right' ? (
           <div class={`${mergedClsPrefix}-button__content`}>{$slots}</div>