From 5b9b21cdd82eca465ea66fbd57021e1d4fde5fcf Mon Sep 17 00:00:00 2001
From: Avan <layouwen@gmail.com>
Date: Mon, 12 Aug 2024 20:58:13 +0800
Subject: [PATCH 1/2] feat(SearchBar): support autoFocus

---
 src/components/search-bar/demos/demo1.tsx | 2 +-
 src/components/search-bar/index.en.md     | 2 +-
 src/components/search-bar/index.zh.md     | 2 +-
 src/components/search-bar/search-bar.tsx  | 8 +++++++-
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/search-bar/demos/demo1.tsx b/src/components/search-bar/demos/demo1.tsx
index e10ca2951f..e0c03aa92c 100644
--- a/src/components/search-bar/demos/demo1.tsx
+++ b/src/components/search-bar/demos/demo1.tsx
@@ -13,7 +13,7 @@ export default () => {
       </DemoBlock>
 
       <DemoBlock title='获取焦点后显示取消按钮'>
-        <SearchBar placeholder='请输入内容' showCancelButton />
+        <SearchBar placeholder='请输入内容' showCancelButton autoFocus />
       </DemoBlock>
 
       <DemoBlock title='取消按钮长显'>
diff --git a/src/components/search-bar/index.en.md b/src/components/search-bar/index.en.md
index ca7c5877c6..6649a2e22c 100644
--- a/src/components/search-bar/index.en.md
+++ b/src/components/search-bar/index.en.md
@@ -34,7 +34,7 @@ Narrow down the information pool to get targeted information quickly and easily.
 | showCancelButton | Whether to display the cancel button on the right side of the search input | `boolean \| ((focus: boolean, value: string) => boolean)` | `false` |
 | value | Input value | `string` | - |
 
-In addition, the following native attributes are supported: `onCompositionStart` `onCompositionEnd`
+In addition, the following native attributes are supported: `onCompositionStart` `onCompositionEnd` `autoFocus`
 
 ### CSS Variables
 
diff --git a/src/components/search-bar/index.zh.md b/src/components/search-bar/index.zh.md
index de6a440492..46fe41189f 100644
--- a/src/components/search-bar/index.zh.md
+++ b/src/components/search-bar/index.zh.md
@@ -34,7 +34,7 @@
 | showCancelButton | 是否在搜索框右侧显示取消按钮 | `boolean \| ((focus: boolean, value: string) => boolean)` | `false` |
 | value | 输入值 | `string` | - |
 
-此外还支持以下原生属性：`onCompositionStart` `onCompositionEnd`
+此外还支持以下原生属性：`onCompositionStart` `onCompositionEnd` `autoFocus`
 
 ### CSS 变量
 
diff --git a/src/components/search-bar/search-bar.tsx b/src/components/search-bar/search-bar.tsx
index 3ebca2a06a..5419505a01 100644
--- a/src/components/search-bar/search-bar.tsx
+++ b/src/components/search-bar/search-bar.tsx
@@ -15,7 +15,12 @@ export type SearchBarRef = InputRef
 
 export type SearchBarProps = Pick<
   InputProps,
-  'onFocus' | 'onBlur' | 'onClear' | 'onCompositionStart' | 'onCompositionEnd'
+  | 'onFocus'
+  | 'onBlur'
+  | 'onClear'
+  | 'onCompositionStart'
+  | 'onCompositionEnd'
+  | 'autoFocus'
 > & {
   value?: string
   defaultValue?: string
@@ -132,6 +137,7 @@ export const SearchBar = forwardRef<SearchBarRef, SearchBarProps>(
             })}
             value={value}
             onChange={setValue}
+            autoFocus={mergedProps.autoFocus}
             maxLength={mergedProps.maxLength}
             placeholder={mergedProps.placeholder}
             clearable={mergedProps.clearable}

From 33457c2770ae2b82b1a39b57860a414c58b0a68d Mon Sep 17 00:00:00 2001
From: Avan <layouwen@gmail.com>
Date: Mon, 12 Aug 2024 21:22:56 +0800
Subject: [PATCH 2/2] chore: adjust order

---
 src/components/search-bar/search-bar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/search-bar/search-bar.tsx b/src/components/search-bar/search-bar.tsx
index 5419505a01..1290fe7721 100644
--- a/src/components/search-bar/search-bar.tsx
+++ b/src/components/search-bar/search-bar.tsx
@@ -137,8 +137,8 @@ export const SearchBar = forwardRef<SearchBarRef, SearchBarProps>(
             })}
             value={value}
             onChange={setValue}
-            autoFocus={mergedProps.autoFocus}
             maxLength={mergedProps.maxLength}
+            autoFocus={mergedProps.autoFocus}
             placeholder={mergedProps.placeholder}
             clearable={mergedProps.clearable}
             onlyShowClearWhenFocus={mergedProps.onlyShowClearWhenFocus}