From 8e5431886aed5e0a823afac06706c15e9298716d Mon Sep 17 00:00:00 2001
From: Zhan Dong <345656572@qq.com>
Date: Sat, 22 Apr 2023 21:21:15 +0800
Subject: [PATCH] feat: Add focus and blur methods to buttons (#6490), close
 #6483

* feat(button): add methods for focus and blur

closed #6483

* docs(button): add focus methods doc
---
 components/button/__tests__/index.test.js |  2 ++
 components/button/button.tsx              | 13 ++++++++++++-
 components/button/index.en-US.md          |  9 +++++++++
 components/button/index.zh-CN.md          |  9 +++++++++
 4 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/components/button/__tests__/index.test.js b/components/button/__tests__/index.test.js
index d82451160..b465c68d3 100644
--- a/components/button/__tests__/index.test.js
+++ b/components/button/__tests__/index.test.js
@@ -5,10 +5,12 @@ import { nextTick } from 'vue';
 import { asyncExpect, sleep } from '../../../tests/utils';
 import mountTest from '../../../tests/shared/mountTest';
 import { resetWarned } from '../../_util/warning';
+import focusTest from '../../../tests/shared/focusTest';
 
 describe('Button', () => {
   mountTest(Button);
   mountTest(Button.Group);
+  focusTest(Button);
   it('renders correctly', () => {
     const wrapper = mount({
       render() {
diff --git a/components/button/button.tsx b/components/button/button.tsx
index 8ae5b4716..c9944c389 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -36,7 +36,7 @@ export default defineComponent({
   props: initDefaultProps(buttonProps(), { type: 'default' }),
   slots: ['icon'],
   // emits: ['click', 'mousedown'],
-  setup(props, { slots, attrs, emit }) {
+  setup(props, { slots, attrs, emit, expose }) {
     const { prefixCls, autoInsertSpaceInButton, direction, size } = useConfigInject('btn', props);
 
     const buttonNodeRef = ref<HTMLElement>(null);
@@ -146,6 +146,17 @@ export default defineComponent({
       delayTimeoutRef.value && clearTimeout(delayTimeoutRef.value);
     });
 
+    const focus = () => {
+      buttonNodeRef.value?.focus();
+    };
+    const blur = () => {
+      buttonNodeRef.value?.blur();
+    };
+    expose({
+      focus,
+      blur,
+    });
+
     return () => {
       const { icon = slots.icon?.() } = props;
       const children = flattenChildren(slots.default?.());
diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md
index 0de3dc711..41e2bf818 100644
--- a/components/button/index.en-US.md
+++ b/components/button/index.en-US.md
@@ -55,6 +55,15 @@ It accepts all props which native buttons support.
 
 ## FAQ
 
+### Methods
+
+#### Checkbox
+
+| Name    | Description  | Version |
+| ------- | ------------ | ------- |
+| blur()  | remove focus |         |
+| focus() | get focus    |         |
+
 ### How to remove space between 2 chinese characters
 
 Following the Ant Design specification, we will add one space between if Button (exclude Text button and Link button) contains two Chinese characters only. If you don't need that, you can use [ConfigProvider](/components/config-provider/#API) to set `autoInsertSpaceInButton` as `false`.
diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md
index 91425ae5d..5bf3dcbc6 100644
--- a/components/button/index.zh-CN.md
+++ b/components/button/index.zh-CN.md
@@ -56,6 +56,15 @@ cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
 
 支持原生 button 的其他所有属性。
 
+### 方法
+
+#### Button
+
+| 名称    | 描述     | 版本 |
+| ------- | -------- | ---- |
+| blur()  | 移除焦点 |      |
+| focus() | 获取焦点 |      |
+
 ## FAQ
 
 ### 如何移除 2 个汉字之间的空格