Skip to content

feat: 给 searchbar 暴露 input 更多属性 #3416

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
irisSong merged 1 commit into from
Jan 8, 2026
Merged

feat: 给 searchbar 暴露 input 更多属性 #3416

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions src/packages/searchbar/demo.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import Demo4 from './demos/taro/demo4'
import Demo5 from './demos/taro/demo5'
import Demo6 from './demos/taro/demo6'
import Demo7 from './demos/taro/demo7'
import Demo8 from './demos/taro/demo8'
import Demo10 from './demos/taro/demo10'

const SearchBarDemo = () => {
Expand All @@ -25,6 +26,7 @@ const SearchBarDemo = () => {
title5: '自定义图标设置',
title6: '数据改变监听',
title7: '自定义设置',
title8: 'InputProps扩展属性',
},
'zh-TW': {
title1: '基礎用法',
Expand All @@ -35,6 +37,7 @@ const SearchBarDemo = () => {
title5: '自定義圖標設定',
title6: '數據改變監聽',
title7: '自定義設定',
title8: 'InputProps擴展屬性',
},
'en-US': {
title1: 'Basic Usage',
Expand All @@ -45,6 +48,7 @@ const SearchBarDemo = () => {
title5: 'Custom Icon Settings',
title6: 'Data Change Monitoring',
title7: 'Custom Settings',
title8: 'InputProps Extension Attributes',
},
})

Expand All @@ -71,6 +75,8 @@ const SearchBarDemo = () => {
<Demo6 />
</>
)}
<View className="h2">{translated.title8}</View>
<Demo8 />
<View className="h2">{translated.title6}</View>
<Demo7 />
</ScrollView>
Expand Down
6 changes: 6 additions & 0 deletions src/packages/searchbar/demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import Demo4 from './demos/h5/demo4'
import Demo5 from './demos/h5/demo5'
import Demo6 from './demos/h5/demo6'
import Demo7 from './demos/h5/demo7'
import Demo8 from './demos/h5/demo8'
import Demo10 from './demos/h5/demo10'

const SearchBarDemo = () => {
Expand All @@ -21,6 +22,7 @@ const SearchBarDemo = () => {
title5: '自定义图标设置',
title6: '数据改变监听',
title7: '自定义设置',
title8: 'InputProps扩展属性',
},
'zh-TW': {
title1: '基礎用法',
Expand All @@ -31,6 +33,7 @@ const SearchBarDemo = () => {
title5: '自定義圖標設定',
title6: '數據改變監聽',
title7: '自定義設定',
title8: 'InputProps擴展屬性',
},
'en-US': {
title1: 'Basic Usage',
Expand All @@ -41,6 +44,7 @@ const SearchBarDemo = () => {
title5: 'Custom Icon Settings',
title6: 'Data Change Monitoring',
title7: 'Custom Settings',
title8: 'InputProps Extension Attributes',
},
})

Expand All @@ -61,6 +65,8 @@ const SearchBarDemo = () => {
<Demo5 />
<h2>{translated.title7}</h2>
<Demo6 />
<h2>{translated.title8}</h2>
<Demo8 />
<h2>{translated.title6}</h2>
<Demo7 />
</div>
Expand Down
33 changes: 33 additions & 0 deletions src/packages/searchbar/demos/h5/demo8.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from 'react'
import { Scan } from '@nutui/icons-react'
import { SearchBar } from '@nutui/nutui-react'

const Demo = () => {
return (
<>
<SearchBar
placeholder="使用inputProps扩展属性"
inputProps={{
autoComplete: 'off',
autoCapitalize: 'none',
spellCheck: false,
}}
/>
<SearchBar
leftIn={<Scan />}
placeholder="自定义input类型和属性"
inputProps={{
type: 'search',
autoComplete: 'on',
}}
/>
<SearchBar
placeholder="设置自定义属性"
inputProps={{
'aria-label': '搜索输入框',
}}
/>
</>
)
}
export default Demo
33 changes: 33 additions & 0 deletions src/packages/searchbar/demos/taro/demo8.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from 'react'
import { Scan } from '@nutui/icons-react-taro'
import { SearchBar } from '@nutui/nutui-react-taro'

const Demo = () => {
return (
<>
<SearchBar
placeholder="使用inputProps扩展属性"
inputProps={{
confirmType: 'search',
password: false,
maxlength: 20,
}}
Comment on lines +10 to +14
Copy link

@coderabbitai coderabbitai bot Jan 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

示例中的 maxlength 属性可能导致混淆

Demo 中使用 inputProps={{ maxlength: 20 }} 和 maxlength: 10,但 SearchBar 组件已经提供了 maxLength prop。由于 inputProps 在最后展开(如 searchbar.taro.tsx 实现所示),这里的 maxlength 会覆盖组件的 maxLength prop。

建议:

  1. 如果是为了演示覆盖行为,应在注释中明确说明
  2. 如果不是,建议使用其他不冲突的 Taro Input 属性作为示例,如 cursor-spacing、confirm-hold 等

这与 searchbar.taro.tsx 中标识的 prop 覆盖问题相关。

Also applies to: 26-28

🤖 Prompt for AI Agents 
In @src/packages/searchbar/demos/taro/demo8.tsx around lines 10 - 14, The demo
currently sets inputProps={{ maxlength: 20 }} which conflicts with the SearchBar
component's maxLength prop because inputProps are spread last (see
searchbar.taro.tsx) and will override it; either remove/rename this conflicting
maxlength, or explicitly document the override in a comment if the demo is meant
to show override behavior; best fix is to replace maxlength with a
non-conflicting Taro Input attribute such as cursor-spacing or confirm-hold
(update the demo in demo8.tsx where SearchBar is instantiated and its inputProps
object).

/>
<SearchBar
leftIn={<Scan />}
placeholder="自定义confirmType为search"
inputProps={{
confirmType: 'search',
type: 'text',
}}
/>
<SearchBar
placeholder="设置maxlength为10"
inputProps={{
maxlength: 10,
}}
/>
</>
)
}
export default Demo
13 changes: 13 additions & 0 deletions src/packages/searchbar/doc.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,17 @@ import { SearchBar } from '@nutui/nutui-react'

:::


### InputProps Extension Attributes

`SearchBar`'s `inputProps` property can extend the attributes of the underlying input element, supporting all attributes of the native input element.

:::demo

<CodeBlock src='h5/demo8.tsx'></CodeBlock>

:::

### Data change monitoring

`SearchBar`'s `onChange` You can get the input content.
Expand All @@ -88,6 +99,7 @@ import { SearchBar } from '@nutui/nutui-react'

:::


## SearchBar

### Props
Expand All @@ -113,6 +125,7 @@ import { SearchBar } from '@nutui/nutui-react'
| onClear | triggered when clicking clear | `(event: MouseEvent<HTMLDivElement>) => void` | `-` |
| onSearch | trigger when confirming search | `(val: string) => void` | `-` |
| onInputClick | triggered when clicking the input area | `(event: MouseEvent<HTMLInputElement>) => void` | `-` |
| inputProps | Extend the underlying input element attributes, supporting all attributes of the native input element | `Partial<InputHTMLAttributes<HTMLInputElement>>` | `-` |

## Theming

Expand Down
13 changes: 13 additions & 0 deletions src/packages/searchbar/doc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,16 @@ import { SearchBar } from '@nutui/nutui-react'

:::

### InputProps扩展属性

`SearchBar` 的 `inputProps` 属性可以扩展底层输入框的属性，支持传入原生input元素的所有属性。

:::demo

<CodeBlock src='h5/demo8.tsx'></CodeBlock>

:::

### 数据改变监听

`SearchBar` 的 `onChange` 可获取输入的内容。
Expand All @@ -86,6 +96,8 @@ import { SearchBar } from '@nutui/nutui-react'

:::



## SearchBar

### Props
Expand All @@ -106,6 +118,7 @@ import { SearchBar } from '@nutui/nutui-react'
| right | 搜搜框右侧区域 | `ReactNode` | `-` |
| leftIn | 输入框内左侧区域 | `ReactNode` | `<Search />` |
| rightIn | 输入框内右侧区域 | `ReactNode` | `-` |
| inputProps | 扩展底层输入框属性，支持传入原生input元素的所有属性 | `Partial<InputHTMLAttributes<HTMLInputElement>>` | `-` |
| onChange | 输入内容时触发 | `(value: string, event: ChangeEvent<HTMLInputElement>) => void` | `-` |
| onFocus | 聚焦时触发 | `(value: string, event: FocusEvent<HTMLInputElement>) => void` | `-` |
| onBlur | 失焦时触发 | `(value: string, event: FocusEvent<HTMLInputElement>) => void` | `-` |
Expand Down
11 changes: 11 additions & 0 deletions src/packages/searchbar/doc.taro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,16 @@ import { SearchBar } from '@nutui/nutui-react-taro'

:::

### InputProps扩展属性

`SearchBar` 的 `inputProps` 属性可以扩展底层TaroInput组件的属性，支持传入TaroInput组件的所有属性。

:::demo

<CodeBlock src='taro/demo8.tsx'></CodeBlock>

:::

### 数据改变监听

`SearchBar` 的 `onChange` 可获取输入的内容。
Expand Down Expand Up @@ -108,6 +118,7 @@ import { SearchBar } from '@nutui/nutui-react-taro'
| right | 搜搜框右侧区域 | `ReactNode` | `-` |
| leftIn | 输入框内左侧区域 | `ReactNode` | `<Search />` |
| rightIn | 输入框内右侧区域 | `ReactNode` | `-` |
| inputProps | 扩展底层TaroInput组件属性，支持传入TaroInput组件的所有属性 | `Partial<InputProps>` | `-` |
| onChange | 输入内容时触发 | `(value: string, event: ChangeEvent<HTMLInputElement>) => void` | `-` |
| onFocus | 聚焦时触发 | `(value: string, event: FocusEvent<HTMLInputElement>) => void` | `-` |
| onBlur | 失焦时触发 | `(value: string, event: FocusEvent<HTMLInputElement>) => void` | `-` |
Expand Down
11 changes: 11 additions & 0 deletions src/packages/searchbar/doc.zh-TW.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,16 @@ import { SearchBar } from '@nutui/nutui-react'

:::

### InputProps擴展屬性

`SearchBar` 的 `inputProps` 屬性可以擴展底層輸入框的屬性，支持傳入原生input元素的所有屬性。

:::demo

<CodeBlock src='h5/demo8.tsx'></CodeBlock>

:::

### 數據改變監聽

`SearchBar` 的 `onChange` 可獲取輸入的內容。
Expand Down Expand Up @@ -108,6 +118,7 @@ import { SearchBar } from '@nutui/nutui-react'
| right | 搜搜框右側區域 | `ReactNode` | `-` |
| leftIn | 輸入框內左側區域 | `ReactNode` | `<Search />` |
| rightIn | 輸入框內右側區域 | `ReactNode` | `-` |
| inputProps | 擴展底層輸入框屬性，支持傳入原生input元素的所有屬性 | `Partial<InputHTMLAttributes<HTMLInputElement>>` | `-` |
| onChange | 輸入內容時觸發 | `(value: string, event: ChangeEvent<HTMLInputElement>) => void` | `-` |
| onFocus | 聚焦時觸發 | `(value: string, event: FocusEvent<HTMLInputElement>) => void` | `-` |
| onBlur | 失焦時觸發 | `(value: string, event: FocusEvent<HTMLInputElement>) => void` | `-` |
Expand Down
3 changes: 3 additions & 0 deletions src/packages/searchbar/searchbar.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ export const SearchBar: FunctionComponent<
leftIn,
rightIn,
tag,
inputProps,
onChange,
onFocus,
onBlur,
Expand Down Expand Up @@ -189,6 +190,7 @@ export const SearchBar: FunctionComponent<
onBlur={handleBlur}
onClick={onInputClick}
onConfirm={onConfirm}
{...inputProps}
Copy link

@coderabbitai coderabbitai bot Jan 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

注意 inputProps 可能覆盖组件自身属性

当前实现中,{...inputProps} 在所有组件属性之后展开,这意味着如果 inputProps 中包含与组件已有属性同名的属性(如 maxlength、disabled、value 等),会覆盖组件的原有属性,可能导致组件的 props 失效。

建议考虑以下方案之一:

  1. 调整展开顺序,将 {...inputProps} 放在组件属性之前,让组件属性优先级更高
  2. 在文档中明确说明这种覆盖行为,并建议开发者避免在 inputProps 中使用已有的属性名
  3. 过滤掉 inputProps 中与组件已有属性冲突的属性
📝 建议的修复方案

方案1: 调整展开顺序(推荐)

 <TaroInput
   className={inputCls}
   ref={searchInputRef}
+  {...inputProps}
   style={{
     ...style,
     ...{ color: `${innerTag ? 'transparent' : '#333'}` },
   }}
   value={value}
   placeholder={placeholder || locale.placeholder}
   disabled={disabled || readOnly}
   maxlength={maxLength}
   autoFocus={autoFocus}
   onInput={handleInput}
   onFocus={handleFocus}
   onBlur={handleBlur}
   onClick={onInputClick}
   onConfirm={onConfirm}
-  {...inputProps}
 />

方案2: 过滤冲突属性

+ const { 
+   maxlength: _maxlength,
+   disabled: _disabled,
+   value: _value,
+   placeholder: _placeholder,
+   ...safeInputProps 
+ } = inputProps || {}
  <TaroInput
    // ... 其他属性
-   {...inputProps}
+   {...safeInputProps}
  />

Also applies to: 213-213

/>
) : (
<TaroInput
Expand All @@ -208,6 +210,7 @@ export const SearchBar: FunctionComponent<
onBlur={handleBlur}
onClick={onInputClick}
onConfirm={onConfirm}
{...inputProps}
/>
)}
</>
Expand Down
2 changes: 2 additions & 0 deletions src/packages/searchbar/searchbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ export const SearchBar: FunctionComponent<
leftIn,
rightIn,
tag,
inputProps,
onChange,
onFocus,
onBlur,
Expand Down Expand Up @@ -186,6 +187,7 @@ export const SearchBar: FunctionComponent<
onFocus={handleFocus}
onBlur={handleBlur}
onClick={handleInputClick}
{...inputProps}
/>
)
}
Expand Down
3 changes: 2 additions & 1 deletion src/types/spec/searchbar/h5.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { ChangeEvent, FocusEvent, MouseEvent } from 'react'
import type { ChangeEvent, FocusEvent, MouseEvent, InputHTMLAttributes } from 'react'
import { BaseSearchBar } from './base'

export interface WebSearchBarProps
Expand All @@ -11,4 +11,5 @@ export interface WebSearchBarProps
onBlur?: (value: string, event: FocusEvent<HTMLInputElement>) => void
onClear?: (event: MouseEvent<HTMLDivElement>) => void
onInputClick?: (event: MouseEvent<HTMLInputElement>) => void
inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>
}
1 change: 1 addition & 0 deletions src/types/spec/searchbar/taro.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,5 @@ export interface TaroSearchBarProps
onBlur?: (value: string, event: BaseEventOrig<inputValueEventDetail>) => void
onClear?: (event: ITouchEvent) => void
onInputClick?: (event: ITouchEvent) => void
inputProps?: Partial<InputProps>
}
Loading