From 577eda4f1d61a1f7c698e172a246a37f0db8f1fd Mon Sep 17 00:00:00 2001
From: "Jack Wu (Mania Jack)" <hzwxh@vip.qq.com>
Date: Mon, 13 Dec 2021 02:04:41 +0800
Subject: [PATCH] refactor(button): can't be clicked in loading status (#1752)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: Button can't be clicked when loading

* docs: 增加 changelog

* fix: 修改 changelog 格式

Co-authored-by: 07akioni <07akioni2@gmail.com>
---
 CHANGELOG.en-US.md                   | 2 ++
 CHANGELOG.zh-CN.md                   | 2 ++
 src/button/src/Button.tsx            | 3 ++-
 src/button/src/styles/button.cssr.ts | 3 +++
 4 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 4beae4d5c8d..3173e01ecfa 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -4,6 +4,8 @@
 
 ### Breaking Changes
 
+- `n-button` can no longer be clicked under `loading` status, closes [#1628](https://github.com/TuSimple/naive-ui/issues/1628).
+
 ### Fixes
 
 - Fix `n-alert`'s `header` slot unable to display normally.
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 438392d61e4..942d4c4244f 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -4,6 +4,8 @@
 
 ### Breaking Changes
 
+- `b-button` 在 `loading` 状态不可再被点击，关闭 [#1628](https://github.com/TuSimple/naive-ui/issues/1628)
+
 ### Fixes
 
 - 修复 `n-alert` 的 `header` slot 无法正常显示
diff --git a/src/button/src/Button.tsx b/src/button/src/Button.tsx
index 39b5074d85c..7165cc1d671 100644
--- a/src/button/src/Button.tsx
+++ b/src/button/src/Button.tsx
@@ -143,7 +143,7 @@ const Button = defineComponent({
       }
     }
     const handleClick = (e: MouseEvent): void => {
-      if (!props.disabled) {
+      if (!props.disabled && !props.loading) {
         const { onClick } = props
         if (onClick) call(onClick, e)
         if (!props.text) {
@@ -509,6 +509,7 @@ const Button = defineComponent({
           !this.text && this.dashed && `${mergedClsPrefix}-button--dashed`,
           this.color && `${mergedClsPrefix}-button--color`,
           this.secondary && `${mergedClsPrefix}-button--secondary`,
+          this.loading && `${mergedClsPrefix}-button--loading`,
           this.ghost && `${mergedClsPrefix}-button--ghost` // required for button group border collapse
         ]}
         tabindex={this.mergedFocusable ? 0 : -1}
diff --git a/src/button/src/styles/button.cssr.ts b/src/button/src/styles/button.cssr.ts
index 8222a1dfdf3..0af816d20c9 100644
--- a/src/button/src/styles/button.cssr.ts
+++ b/src/button/src/styles/button.cssr.ts
@@ -141,6 +141,9 @@ export default c([
         })
       ])
     ]),
+    cM('loading', {
+      'pointer-events': 'none'
+    }),
     cB('base-wave', `
       pointer-events: none;
       top: 0;