feat(SearchBar): support autoFocus

ant-design · Aug 12, 2024 · 5b9b21c · 5b9b21c
1 parent 2bb5af4
commit 5b9b21c
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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}