diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index f2f5b4aabba..96e29b2616b 100644 --- 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 index bfcf00279d9..2ee055289cd 100644 --- 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 index 15a8b9f714d..e8f75269f48 100644 --- 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' ? (