From ba6ee424a679786a2de42a07f6102ff1a7d2aea7 Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Mon, 28 Apr 2025 20:00:22 +0800
Subject: [PATCH 01/14] =?UTF-8?q?feat(searchbar):=20v15=20=E9=80=82?=
 =?UTF-8?q?=E9=85=8D,=E5=A2=9E=E5=8A=A0=E4=BA=86=E5=8F=97=E6=8E=A7?=
 =?UTF-8?q?=E5=92=8C=E9=BB=98=E8=AE=A4=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/searchbar/demo.tsx               |  15 +-
 src/packages/searchbar/demos/h5/demo1.tsx     |  15 +-
 src/packages/searchbar/demos/h5/demo10.tsx    |  46 +++++++
 src/packages/searchbar/demos/h5/demo3.tsx     |   2 +-
 src/packages/searchbar/demos/h5/demo5.tsx     |  10 +-
 src/packages/searchbar/doc.md                 |  20 +--
 src/packages/searchbar/doc.taro.md            |  16 +--
 src/packages/searchbar/doc.zh-TW.md           |  16 +--
 src/packages/searchbar/searchbar.scss         | 109 +++++++++++----
 src/packages/searchbar/searchbar.tsx          | 129 +++++++++++-------
 .../doc/docs/react/migrate-from-v2.md         |   7 +-
 src/styles/variables.scss                     |  25 ++--
 src/types/spec/searchbar/base.ts              |   2 +
 13 files changed, 285 insertions(+), 127 deletions(-)
 create mode 100644 src/packages/searchbar/demos/h5/demo10.tsx

diff --git a/src/packages/searchbar/demo.tsx b/src/packages/searchbar/demo.tsx
index 5a5fe879d0..5dfc3e96bb 100644
--- a/src/packages/searchbar/demo.tsx
+++ b/src/packages/searchbar/demo.tsx
@@ -8,11 +8,13 @@ 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 Demo10 from './demos/h5/demo10'
 
 const SearchBarDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
       title1: '基础用法',
+      title10: '默认值、受控',
       title2: '搜索框形状及最大长度',
       title3: '搜索框内外背景设置',
       title4: '搜索框文本设置',
@@ -22,6 +24,7 @@ const SearchBarDemo = () => {
     },
     'zh-TW': {
       title1: '基礎用法',
+      title10: '默认值、受控',
       title2: '蒐索框形狀及最大長度',
       title3: '蒐索框內外背景設定',
       title4: '蒐索框文字設定',
@@ -31,6 +34,7 @@ const SearchBarDemo = () => {
     },
     'en-US': {
       title1: 'Basic Usage',
+      title10: '默认值、受控',
       title2: 'Search Box Shape And Maximum Length',
       title3: 'Background Settings Inside And Outside The Search Box',
       title4: 'Search Box Text Settings',
@@ -38,15 +42,6 @@ const SearchBarDemo = () => {
       title6: 'Data Change Monitoring',
       title7: 'Custom Settings',
     },
-    'id-ID': {
-      title1: 'penggunaan dasar',
-      title2: 'bentuk kotak pencarian dan panjang maksimum',
-      title3: 'pengaturan latar belakang di dalam dan diluar kotak pencarian',
-      title4: 'tetapan teks kotak pencarian',
-      title5: 'pengaturan ikon suai',
-      title6: 'Monitor perubahan data',
-      title7: 'pengaturan suai',
-    },
   })
 
   return (
@@ -54,6 +49,8 @@ const SearchBarDemo = () => {
       <div className="demo">
         <h2>{translated.title1}</h2>
         <Demo1 />
+        <h2>{translated.title10}</h2>
+        <Demo10 />
         <h2>{translated.title2}</h2>
         <Demo2 />
         <h2>{translated.title3}</h2>
diff --git a/src/packages/searchbar/demos/h5/demo1.tsx b/src/packages/searchbar/demos/h5/demo1.tsx
index c9ffdbff10..0549695dd5 100644
--- a/src/packages/searchbar/demos/h5/demo1.tsx
+++ b/src/packages/searchbar/demos/h5/demo1.tsx
@@ -1,10 +1,23 @@
 import React from 'react'
+import { Photograph, Scan } from '@nutui/icons-react'
 import { SearchBar } from '../../searchbar'
+import Divider from '@/packages/divider'
 
 const Demo1 = () => {
   return (
     <>
-      <SearchBar backable placeholder="上京东，购好物" />
+      <SearchBar placeholder="麻辣烫" rightIn="搜索" />
+      <SearchBar
+        leftIn={<Scan />}
+        placeholder="华为Mate 70"
+        rightIn={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <Photograph color="#888B94" />
+            <Divider direction="vertical" />
+            <span style={{ color: '#ff0f23' }}>搜索</span>
+          </div>
+        }
+      />
     </>
   )
 }
diff --git a/src/packages/searchbar/demos/h5/demo10.tsx b/src/packages/searchbar/demos/h5/demo10.tsx
new file mode 100644
index 0000000000..6f27ca4724
--- /dev/null
+++ b/src/packages/searchbar/demos/h5/demo10.tsx
@@ -0,0 +1,46 @@
+import React, { useState } from 'react'
+import { Category, Photograph } from '@nutui/icons-react'
+import { SearchBar } from '../../searchbar'
+import Button from '@/packages/button'
+
+const Demo1 = () => {
+  const [dvalue, setDvalue] = useState('西红柿,铁皮')
+  const [value, setValue] = useState('西红柿')
+  return (
+    <>
+      <SearchBar
+        backable
+        leftIn={null}
+        defaultValue={dvalue}
+        onItemClick={(value: string) => {
+          console.log('click', value)
+          setDvalue('黄瓜')
+        }}
+        rightIn={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <Photograph color="#505259" />
+          </div>
+        }
+        right={<Category />}
+      />
+      <SearchBar
+        backable
+        leftIn={null}
+        value={value}
+        onChange={(val) => {
+          setValue(val)
+        }}
+        autoFocus
+        rightIn={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <Photograph color="#505259" style={{ marginRight: '12px' }} />
+            <Button type="primary" size="mini">
+              搜索
+            </Button>
+          </div>
+        }
+      />
+    </>
+  )
+}
+export default Demo1
diff --git a/src/packages/searchbar/demos/h5/demo3.tsx b/src/packages/searchbar/demos/h5/demo3.tsx
index debda1aff0..5b81c00b71 100644
--- a/src/packages/searchbar/demos/h5/demo3.tsx
+++ b/src/packages/searchbar/demos/h5/demo3.tsx
@@ -9,7 +9,7 @@ const Demo3 = () => {
       <ConfigProvider
         theme={{
           nutuiSearchbarBackground: 'var(--nutui-color-primary)',
-          nutuiSearchbarContentBackground: '#eee',
+          nutuiSearchbarContentBackground: '#fff',
           nutuiSearchbarInputTextAlign: 'right',
         }}
       >
diff --git a/src/packages/searchbar/demos/h5/demo5.tsx b/src/packages/searchbar/demos/h5/demo5.tsx
index e35f8ec58c..16a076dc1e 100644
--- a/src/packages/searchbar/demos/h5/demo5.tsx
+++ b/src/packages/searchbar/demos/h5/demo5.tsx
@@ -8,26 +8,22 @@ const Demo5 = () => {
       <SearchBar
         left={
           <>
-            <ArrowLeft width={20} height={20} />
-            <Close width={20} height={20} />
+            <ArrowLeft />
+            <Close />
           </>
         }
         right={
           <>
             <Star
-              width={20}
-              height={20}
               style={{
                 color: 'var(--nutui-color-primary)',
               }}
             />
-            <More width={20} height={20} />
+            <More />
           </>
         }
         rightIn={
           <Photograph
-            width={16}
-            height={16}
             onClick={() => {
               console.log('Photograph right in')
             }}
diff --git a/src/packages/searchbar/doc.md b/src/packages/searchbar/doc.md
index 2e27cc0dbd..afe0d7beb7 100644
--- a/src/packages/searchbar/doc.md
+++ b/src/packages/searchbar/doc.md
@@ -86,7 +86,8 @@ import { SearchBar } from '@nutui/nutui-react'
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 当前输入的值 | `string` | `-` |
+| value | 当前输入的值，受控 | `string` | `-` |
+| defaultValue | 当前默认值，支持通过','分割成多个 | `string` | `-` |
 | placeholder | 输入框默认暗纹 | `string` | `请输入` |
 | shape | 搜索框形状，可选值为 `round` | `string` | `square` |
 | disabled | 是否禁用输入框 | `boolean` | `false` |
@@ -105,6 +106,7 @@ import { SearchBar } from '@nutui/nutui-react'
 | onClear | 点击清空时触发 | `(event: MouseEvent<HTMLDivElement>) => void` | `-` |
 | onSearch | 确定搜索时触发 | `(val: string) => void` | `-` |
 | onInputClick | 点击输入区域时触发 | `(event: MouseEvent<HTMLInputElement>) => void` | `-` |
+| onItemClick | 点击默认值的x号触发 | `(value: string) => void` | `-` |
 
 ## 主题定制
 
@@ -115,17 +117,17 @@ import { SearchBar } from '@nutui/nutui-react'
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
 | \--nutui-searchbar-width | 搜索框的宽度 | `100%` |
-| \--nutui-searchbar-padding | 搜索框的padding值 | `6px 16px` |
-| \--nutui-searchbar-background | 搜索框背景色 | `$color-background` |
+| \--nutui-searchbar-padding | 搜索框的padding值 | `1px 8px` |
+| \--nutui-searchbar-background | 搜索框背景色 | `$color-background-sunken` |
 | \--nutui-searchbar-color | 搜索框字色 | `$color-title` |
-| \--nutui-searchbar-gap | 搜索框各个间距 | `16px` |
+| \--nutui-searchbar-gap | 搜索框外部/大间距 | `12px` |
+| \--nutui-searchbar-inner-gap | 搜索框内部元素间的间距 | `12px` |
 | \--nutui-searchbar-font-size | 搜索框字号 | `$font-size-base` |
-| \--nutui-searchbar-content-padding | 搜索框中间内容区的padding值 | `0px 12px` |
 | \--nutui-searchbar-content-background | 搜索框中间内容区的背景色 | `$color-background-overlay` |
-| \--nutui-searchbar-content-border-radius | 搜索框内容区圆角 | `4px` |
-| \--nutui-searchbar-content-round-border-radius | 搜索框内容区在round模式下的圆角 | `18px` |
-| \--nutui-searchbar-input-height | 搜索框输入区高度 | `32px` |
-| \--nutui-searchbar-input-padding | 搜索框输入区padding | `0 4px` |
+| \--nutui-searchbar-content-border-radius | 搜索框内容区圆角 | `8px` |
+| \--nutui-searchbar-content-round-border-radius | 搜索框内容区在round模式下的圆角 | `19px` |
+| \--nutui-searchbar-input-height | 搜索框输入区高度 | `38px` |
+| \--nutui-searchbar-input-padding | 搜索框输入区padding | `0 0 0 8px` |
 | \--nutui-searchbar-input-text-color | 搜索框输入区字色 | `$color-title` |
 | \--nutui-searchbar-input-curror-color | 搜索框输入区输入色 | `$color-title` |
 | \--nutui-searchbar-input-text-align | 搜索框输入区对齐方式 | `left` |
diff --git a/src/packages/searchbar/doc.taro.md b/src/packages/searchbar/doc.taro.md
index 8de25fb373..90650621d7 100644
--- a/src/packages/searchbar/doc.taro.md
+++ b/src/packages/searchbar/doc.taro.md
@@ -115,17 +115,17 @@ import { SearchBar } from '@nutui/nutui-react-taro'
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
 | \--nutui-searchbar-width | 搜索框的宽度 | `100%` |
-| \--nutui-searchbar-padding | 搜索框的padding值 | `6px 16px` |
-| \--nutui-searchbar-background | 搜索框背景色 | `$color-background` |
+| \--nutui-searchbar-padding | 搜索框的padding值 | `1px 8px` |
+| \--nutui-searchbar-background | 搜索框背景色 | `$color-background-sunken` |
 | \--nutui-searchbar-color | 搜索框字色 | `$color-title` |
-| \--nutui-searchbar-gap | 搜索框各个间距 | `16px` |
+| \--nutui-searchbar-gap | 搜索框外部/大间距 | `12px` |
+| \--nutui-searchbar-inner-gap | 搜索框内部元素间的间距 | `12px` |
 | \--nutui-searchbar-font-size | 搜索框字号 | `$font-size-base` |
-| \--nutui-searchbar-content-padding | 搜索框中间内容区的padding值 | `0px 12px` |
 | \--nutui-searchbar-content-background | 搜索框中间内容区的背景色 | `$color-background-overlay` |
-| \--nutui-searchbar-content-border-radius | 搜索框内容区圆角 | `4px` |
-| \--nutui-searchbar-content-round-border-radius | 搜索框内容区在round模式下的圆角 | `18px` |
-| \--nutui-searchbar-input-height | 搜索框输入区高度 | `32px` |
-| \--nutui-searchbar-input-padding | 搜索框输入区padding | `0 4px` |
+| \--nutui-searchbar-content-border-radius | 搜索框内容区圆角 | `8px` |
+| \--nutui-searchbar-content-round-border-radius | 搜索框内容区在round模式下的圆角 | `19px` |
+| \--nutui-searchbar-input-height | 搜索框输入区高度 | `38px` |
+| \--nutui-searchbar-input-padding | 搜索框输入区padding | `0 0 0 8px` |
 | \--nutui-searchbar-input-text-color | 搜索框输入区字色 | `$color-title` |
 | \--nutui-searchbar-input-curror-color | 搜索框输入区输入色 | `$color-title` |
 | \--nutui-searchbar-input-text-align | 搜索框输入区对齐方式 | `left` |
diff --git a/src/packages/searchbar/doc.zh-TW.md b/src/packages/searchbar/doc.zh-TW.md
index 9e2ec4a93a..941a73d475 100644
--- a/src/packages/searchbar/doc.zh-TW.md
+++ b/src/packages/searchbar/doc.zh-TW.md
@@ -115,17 +115,17 @@ import { SearchBar } from '@nutui/nutui-react'
 | 名稱 | 說明 | 默認值 |
 | --- | --- | --- |
 | \--nutui-searchbar-width | 搜索框的寬度 | `100%` |
-| \--nutui-searchbar-padding | 搜索框的padding值 | `6px 16px` |
-| \--nutui-searchbar-background | 搜索框背景色 | `$color-background` |
+| \--nutui-searchbar-padding | 搜索框的padding值 | `1px 8px` |
+| \--nutui-searchbar-background | 搜索框背景色 | `$color-background-sunken` |
 | \--nutui-searchbar-color | 搜索框字色 | `$color-title` |
-| \--nutui-searchbar-gap | 搜索框各個間距 | `16px` |
+| \--nutui-searchbar-gap | 搜索框外部/大間距 | `12px` |
+| \--nutui-searchbar-inner-gap | 搜索框內部元素間的間距 | `12px` |
 | \--nutui-searchbar-font-size | 搜索框字號 | `$font-size-base` |
-| \--nutui-searchbar-content-padding | 搜索框中間內容區的padding值 | `0px 12px` |
 | \--nutui-searchbar-content-background | 搜索框中間內容區的背景色 | `$color-background-overlay` |
-| \--nutui-searchbar-content-border-radius | 搜索框內容區圓角 | `4px` |
-| \--nutui-searchbar-content-round-border-radius | 搜索框內容區在round模式下的圓角 | `18px` |
-| \--nutui-searchbar-input-height | 搜索框輸入區高度 | `32px` |
-| \--nutui-searchbar-input-padding | 搜索框輸入區padding | `0 4px` |
+| \--nutui-searchbar-content-border-radius | 搜索框內容區圓角 | `8px` |
+| \--nutui-searchbar-content-round-border-radius | 搜索框內容區在round模式下的圓角 | `19px` |
+| \--nutui-searchbar-input-height | 搜索框輸入區高度 | `38px` |
+| \--nutui-searchbar-input-padding | 搜索框輸入區padding | `0 0 0 8px` |
 | \--nutui-searchbar-input-text-color | 搜索框輸入區字色 | `$color-title` |
 | \--nutui-searchbar-input-curror-color | 搜索框輸入區輸入色 | `$color-title` |
 | \--nutui-searchbar-input-text-align | 搜索框輸入區對齊方式 | `left` |
diff --git a/src/packages/searchbar/searchbar.scss b/src/packages/searchbar/searchbar.scss
index 31b7cda15a..ab50311eba 100644
--- a/src/packages/searchbar/searchbar.scss
+++ b/src/packages/searchbar/searchbar.scss
@@ -9,28 +9,99 @@
   box-sizing: border-box;
   justify-content: center;
 
+  .nut-icon {
+    width: $searchbar-icon-size;
+    height: $searchbar-icon-size;
+    font-size: $searchbar-icon-size;
+  }
+
   &-content {
+    position: relative;
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: $searchbar-content-padding;
+    padding: 0 $searchbar-gap;
     height: $searchbar-input-height;
     background: $searchbar-content-background;
     border-radius: $searchbar-content-border-radius;
+    border: 1px solid $color-primary;
   }
 
   &-icon {
     display: flex;
     justify-content: center;
     align-items: center;
+    color: $color-primary;
+  }
+
+  &-leftin {
+    margin-right: $searchbar-inner-gap;
   }
 
-  &-clear,
   &-rightin {
-    width: 16px;
-    height: 16px;
-    color: var(--nutui-black-5);
+    font-size: 15px;
+    font-weight: 500;
+    color: $color-primary;
+
+    &.nut-searchbar-icon {
+      color: var(--nutui-black-5);
+    }
+  }
+
+  &-input-box,
+  &-input {
+    display: flex;
+    align-items: center;
+    flex: 1;
+  }
+
+  &-input {
+    border: 0;
+    outline: 0;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    font-size: $searchbar-font-size;
+    color: $searchbar-input-text-color;
+    caret-color: $searchbar-input-curror-color;
+    background: transparent;
+    text-align: $searchbar-input-text-align;
+  }
+
+  &-clear {
+    &.nut-searchbar-icon {
+      width: 12px;
+      height: 12px;
+      color: var(--nutui-black-5);
+      margin-right: $searchbar-inner-gap;
+    }
+  }
+
+  &-values {
+    position: absolute;
+    display: flex;
+    background-color: #fff;
+    top: 9px;
+    left: 6px;
+    font-size: 12px;
+    line-height: 12px;
+
+    .nut-searchbar-value {
+      padding: 4px 8px;
+      background-color: #f7f8fc;
+      border-radius: 4px;
+      margin-right: 2px;
+    }
+
+    .nut-icon {
+      width: 6px;
+      height: 6px;
+      font-size: 6px;
+      color: #c2c4cc;
+      margin-left: 4px;
+    }
   }
 
   &-left,
@@ -93,26 +164,6 @@
     }
   }
 
-  &-input-box,
-  &-input {
-    display: flex;
-    align-items: center;
-    flex: 1;
-  }
-
-  &-input {
-    border: 0;
-    outline: 0;
-    box-sizing: border-box;
-    width: 100%;
-    padding: $searchbar-input-padding;
-    font-size: $searchbar-font-size;
-    color: $searchbar-input-text-color;
-    caret-color: $searchbar-input-curror-color;
-    background: transparent;
-    text-align: $searchbar-input-text-align;
-  }
-
   &-round {
     border-radius: $searchbar-content-round-border-radius;
   }
@@ -120,6 +171,14 @@
   &-disabled {
     cursor: not-allowed;
   }
+
+  &-focus {
+    padding: 5px $searchbar-gap;
+
+    .nut-searchbar-content {
+      border: 0.5px solid #ff5c67;
+    }
+  }
 }
 
 [dir='rtl'] .nut-searchbar,
diff --git a/src/packages/searchbar/searchbar.tsx b/src/packages/searchbar/searchbar.tsx
index 52860afab4..343c0f0b41 100644
--- a/src/packages/searchbar/searchbar.tsx
+++ b/src/packages/searchbar/searchbar.tsx
@@ -1,9 +1,11 @@
 import type { ChangeEvent, FocusEvent, MouseEvent } from 'react'
-import React, { FunctionComponent, useEffect, useRef, useState } from 'react'
-import { ArrowLeft, MaskClose, Search } from '@nutui/icons-react'
+import React, { FunctionComponent, useEffect, useRef } from 'react'
+import { ArrowLeft, Close, MaskClose, Search } from '@nutui/icons-react'
+import classNames from 'classnames'
 import { useConfig } from '@/packages/configprovider'
 import { ComponentDefaults } from '@/utils/typings'
 import { WebSearchBarProps } from '@/types'
+import { usePropsValue } from '@/hooks/use-props-value'
 
 const defaultProps = {
   ...ComponentDefaults,
@@ -18,7 +20,7 @@ const defaultProps = {
   left: '',
   right: '',
   rightIn: '',
-  leftIn: <Search width="16" height="16" />,
+  leftIn: <Search />,
 } as WebSearchBarProps
 export const SearchBar: FunctionComponent<
   Partial<WebSearchBarProps> &
@@ -30,10 +32,11 @@ export const SearchBar: FunctionComponent<
   const classPrefix = 'nut-searchbar'
 
   const { locale } = useConfig()
-  const searchRef = useRef<HTMLInputElement>(null)
+  const searchInputRef = useRef<HTMLInputElement>(null)
 
   const {
     value: outerValue,
+    defaultValue,
     style,
     placeholder,
     shape,
@@ -54,60 +57,85 @@ export const SearchBar: FunctionComponent<
     onClear,
     onSearch,
     onInputClick,
+    onItemClick,
   } = {
     ...defaultProps,
     ...props,
   }
 
-  const [value, setValue] = useState(() => outerValue)
+  const [value, setValue] = usePropsValue<string>({
+    value: outerValue,
+    defaultValue,
+    finalValue: '',
+  })
+
+  useEffect(() => {
+    setValue(defaultValue)
+  }, [defaultValue])
 
   const forceFocus = () => {
-    const searchSelf: HTMLInputElement | null = searchRef.current
+    const searchSelf: HTMLInputElement | null = searchInputRef.current
     searchSelf && searchSelf.focus()
   }
-  const change = (event: ChangeEvent<HTMLInputElement>) => {
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { value } = event.target
-    onChange && onChange?.(value, event)
+    onChange && onChange(value, event)
     setValue(value)
   }
-  const focus = (event: FocusEvent<HTMLInputElement>) => {
+
+  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
     const { value } = event.target
-    onFocus && onFocus?.(value, event)
+    onFocus && onFocus(value, event)
   }
-  const blur = (event: FocusEvent<HTMLInputElement>) => {
-    const searchSelf: HTMLInputElement | null = searchRef.current
+
+  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
+    const searchSelf: HTMLInputElement | null = searchInputRef.current
     searchSelf && searchSelf.blur()
     const { value } = event.target
-    onBlur && onBlur?.(value, event)
+    onBlur && onBlur(value, event)
   }
-  useEffect(() => {
-    setValue(outerValue)
-  }, [outerValue])
+
   useEffect(() => {
     autoFocus && forceFocus()
   }, [autoFocus])
+
   const renderField = () => {
+    const inputCls = classNames(`${classPrefix}-input`)
     return (
       <input
-        className={`${classPrefix}-input ${
-          clearable ? `${classPrefix}-input-clear` : ''
-        }`}
-        ref={searchRef}
+        className={inputCls}
+        ref={searchInputRef}
         value={value || ''}
         placeholder={placeholder || locale.placeholder}
         disabled={disabled}
         readOnly={readOnly}
         maxLength={maxLength}
         onKeyDown={onKeydown}
-        onChange={(e) => change(e)}
-        onFocus={(e) => focus(e)}
-        onBlur={(e) => blur(e)}
-        onClick={(e) => clickInput(e)}
+        onChange={handleChange}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        onClick={onInputClick}
       />
     )
   }
-  const clickInput = (e: MouseEvent<HTMLInputElement>) => {
-    onInputClick && onInputClick(e)
+
+  const renderDefaultValue = () => {
+    const list = defaultValue.split(',')
+    return (
+      <div className="nut-searchbar-values">
+        {list.map((item, index) => (
+          <div
+            key={`def-${index}`}
+            className="nut-searchbar-value"
+            onClick={() => onItemClick(item)}
+          >
+            {item}
+            <Close />
+          </div>
+        ))}
+      </div>
+    )
   }
 
   const renderLeftIn = () => {
@@ -122,7 +150,7 @@ export const SearchBar: FunctionComponent<
     if (!backable && !left) return null
     return (
       <div className={`${classPrefix}-left`}>
-        {backable ? <ArrowLeft width="16" height="16" /> : left}
+        {backable ? <ArrowLeft /> : left}
       </div>
     )
   }
@@ -130,9 +158,15 @@ export const SearchBar: FunctionComponent<
   const renderRightIn = () => {
     if (!rightIn) return null
     return (
-      <div className={`${classPrefix}-rightin ${classPrefix}-icon`}>
-        {rightIn}
-      </div>
+      <>
+        {React.isValidElement(rightIn) ? (
+          <div className={`${classPrefix}-rightin ${classPrefix}-icon`}>
+            {rightIn}
+          </div>
+        ) : (
+          <div className={`${classPrefix}-rightin`}>{rightIn}</div>
+        )}
+      </>
     )
   }
 
@@ -141,7 +175,7 @@ export const SearchBar: FunctionComponent<
     return <div className={`${classPrefix}-right`}>{right}</div>
   }
 
-  const handleClear = () => {
+  const renderClear = () => {
     return (
       <div
         className={`${classPrefix}-clear ${classPrefix}-icon`}
@@ -153,11 +187,9 @@ export const SearchBar: FunctionComponent<
   }
 
   const clearaVal = (event: MouseEvent<HTMLDivElement>) => {
-    if (disabled || readOnly) {
-      return
-    }
+    if (disabled || readOnly) return
     setValue('')
-    onChange && onChange?.('')
+    onChange && onChange('')
     onClear && onClear(event)
     forceFocus()
   }
@@ -172,23 +204,28 @@ export const SearchBar: FunctionComponent<
     }
   }
 
+  const cls = classNames(
+    classPrefix,
+    {
+      [`${classPrefix}-disabled`]: disabled,
+      [`${classPrefix}-focus`]: left || backable,
+    },
+    className
+  )
+
   return (
-    <div
-      className={`${classPrefix} ${
-        disabled ? `${classPrefix}-disabled` : ''
-      }  ${className || ''}`}
-      style={style}
-    >
+    <div className={cls} style={style}>
       {renderLeft()}
       <div
-        className={`${classPrefix}-content ${
-          shape === 'round' ? `${classPrefix}-round` : ''
-        }`}
+        className={classNames(`${classPrefix}-content`, {
+          [`${classPrefix}-round`]: shape === 'round',
+        })}
       >
         {renderLeftIn()}
         {renderField()}
-        {clearable && !value && renderRightIn()}
-        {clearable && value && handleClear()}
+        {defaultValue && renderDefaultValue()}
+        {!defaultValue && clearable && value && renderClear()}
+        {renderRightIn()}
       </div>
       {renderRight()}
     </div>
diff --git a/src/sites/sites-react/doc/docs/react/migrate-from-v2.md b/src/sites/sites-react/doc/docs/react/migrate-from-v2.md
index cf2fd267e5..efffad7b12 100644
--- a/src/sites/sites-react/doc/docs/react/migrate-from-v2.md
+++ b/src/sites/sites-react/doc/docs/react/migrate-from-v2.md
@@ -180,7 +180,12 @@ plugins: [
 - 新增 size 属性，控制图标的大小
 - 新增 showScore 属性，展示评分文案
 
-[//]: # '#### SearchBar'
+#### SearchBar
+
+- `value` 属性，支持受控
+- 新增 `defaultValue` 属性，用于搜索默认值，支持以','分割的字符串，用以展示为多个
+- 新增 `onItemClick` 属性，用于点击展示默认值时的x号，支持回调处理
+
 [//]: # '#### ShortPassword'
 
 #### TextArea
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 095ae69393..508b27a4da 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1926,42 +1926,43 @@ $collapse-wrapper-content-background-color: var(
 
 // searchbar（✅）
 $searchbar-width: var(--nutui-searchbar-width, 100%) !default;
-$searchbar-padding: var(--nutui-searchbar-padding, 6px 16px) !default;
+$searchbar-padding: var(--nutui-searchbar-padding, 1px 8px) !default;
 $searchbar-background: var(
   --nutui-searchbar-background,
-  $color-background
+  $color-background-sunken
 ) !default;
 $searchbar-color: var(--nutui-searchbar-color, $color-title) !default;
-$searchbar-gap: var(--nutui-searchbar-gap, 16px) !default;
+$searchbar-gap: var(--nutui-searchbar-gap, 12px) !default;
+$searchbar-inner-gap: var(--nutui-searchbar-inner-gap, 8px) !default;
 $searchbar-font-size: var(
   --nutui-searchbar-font-size,
   $font-size-base
 ) !default;
-$searchbar-content-padding: var(
-  --nutui-searchbar-content-padding,
-  0 12px
-) !default;
 $searchbar-content-background: var(
   --nutui-searchbar-content-background,
   $color-background-overlay
 ) !default;
 $searchbar-content-border-radius: var(
   --nutui-searchbar-content-border-radius,
-  4px
+  8px
 ) !default;
 $searchbar-content-round-border-radius: var(
   --nutui-searchbar-content-round-border-radius,
-  18px
+  19px
+) !default;
+$searchbar-icon-size: var(--nutui-searchbar-icon-size, 20px);
+$searchbar-input-height: var(--nutui-searchbar-input-height, 38px) !default;
+$searchbar-input-padding: var(
+  --nutui-searchbar-input-padding,
+  0 0 0 8px
 ) !default;
-$searchbar-input-height: var(--nutui-searchbar-input-height, 32px) !default;
-$searchbar-input-padding: var(--nutui-searchbar-input-padding, 0 4px) !default;
 $searchbar-input-text-color: var(
   --nutui-searchbar-input-text-color,
   $color-title
 ) !default;
 $searchbar-input-curror-color: var(
   --nutui-searchbar-input-curror-color,
-  $color-title
+  $color-primary
 ) !default;
 $searchbar-input-text-align: var(
   --nutui-searchbar-input-text-align,
diff --git a/src/types/spec/searchbar/base.ts b/src/types/spec/searchbar/base.ts
index 378aacc871..f2190bfa48 100644
--- a/src/types/spec/searchbar/base.ts
+++ b/src/types/spec/searchbar/base.ts
@@ -4,6 +4,7 @@ import { BaseProps } from '../../base/props'
 
 export interface BaseSearchBar extends BaseProps {
   value: string
+  defaultValue: string
   placeholder: string
   shape: UIRound
   disabled: boolean
@@ -22,4 +23,5 @@ export interface BaseSearchBar extends BaseProps {
   onBlur: (value: string, e: any) => void
   onClear: (e: any) => void
   onInputClick: (e: any) => void
+  onItemClick: (value: string) => void
 }

From 63ae5b53a77f8c84c8b9a969b10030d27dfdef7b Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Mon, 28 Apr 2025 20:05:06 +0800
Subject: [PATCH 02/14] docs: doc

---
 src/packages/searchbar/doc.md       | 2 +-
 src/packages/searchbar/doc.taro.md  | 6 ++++--
 src/packages/searchbar/doc.zh-TW.md | 8 +++++---
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/packages/searchbar/doc.md b/src/packages/searchbar/doc.md
index afe0d7beb7..5acaed01d1 100644
--- a/src/packages/searchbar/doc.md
+++ b/src/packages/searchbar/doc.md
@@ -98,7 +98,7 @@ import { SearchBar } from '@nutui/nutui-react'
 | backable | 是否展示返回按钮 | `boolean` | `false` |
 | left | 搜索框左侧区域 | `ReactNode` | `-` |
 | right | 搜搜框右侧区域 | `ReactNode` | `-` |
-| leftIn | 输入框内左侧区域 | `ReactNode` | `<Search width="12" height="12" />` |
+| leftIn | 输入框内左侧区域 | `ReactNode` | `<Search />` |
 | rightIn | 输入框内右侧区域 | `ReactNode` | `-` |
 | onChange | 输入内容时触发 | `(value: string, event: ChangeEvent<HTMLInputElement>) => void` | `-` |
 | onFocus | 聚焦时触发 | `(value: string, event: FocusEvent<HTMLInputElement>) => void` | `-` |
diff --git a/src/packages/searchbar/doc.taro.md b/src/packages/searchbar/doc.taro.md
index 90650621d7..33f160f7f2 100644
--- a/src/packages/searchbar/doc.taro.md
+++ b/src/packages/searchbar/doc.taro.md
@@ -86,7 +86,8 @@ import { SearchBar } from '@nutui/nutui-react-taro'
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 当前输入的值 | `string` | `-` |
+| value | 当前输入的值，受控 | `string` | `-` |
+| defaultValue | 当前默认值，支持通过','分割成多个 | `string` | `-` |
 | placeholder | 输入框默认暗纹 | `string` | `请输入` |
 | shape | 搜索框形状，可选值为 `round` | `string` | `square` |
 | disabled | 是否禁用输入框 | `boolean` | `false` |
@@ -97,7 +98,7 @@ import { SearchBar } from '@nutui/nutui-react-taro'
 | backable | 是否展示返回按钮 | `boolean` | `false` |
 | left | 搜索框左侧区域 | `ReactNode` | `-` |
 | right | 搜搜框右侧区域 | `ReactNode` | `-` |
-| leftIn | 输入框内左侧区域 | `ReactNode` | `<Search size="12" />` |
+| leftIn | 输入框内左侧区域 | `ReactNode` | `<Search />` |
 | rightIn | 输入框内右侧区域 | `ReactNode` | `-` |
 | onChange | 输入内容时触发 | `(value: string, event: ChangeEvent<HTMLInputElement>) => void` | `-` |
 | onFocus | 聚焦时触发 | `(value: string, event: FocusEvent<HTMLInputElement>) => void` | `-` |
@@ -105,6 +106,7 @@ import { SearchBar } from '@nutui/nutui-react-taro'
 | onClear | 点击清空时触发 | `(event: MouseEvent<HTMLDivElement>) => void` | `-` |
 | onSearch | 确定搜索时触发 | `(val: string) => void` | `-` |
 | onInputClick | 点击输入区域时触发 | `(event: MouseEvent<HTMLInputElement>) => void` | `-` |
+| onItemClick | 点击默认值的x号触发 | `(value: string) => void` | `-` |
 
 ## 主题定制
 
diff --git a/src/packages/searchbar/doc.zh-TW.md b/src/packages/searchbar/doc.zh-TW.md
index 941a73d475..7b2fcd74c5 100644
--- a/src/packages/searchbar/doc.zh-TW.md
+++ b/src/packages/searchbar/doc.zh-TW.md
@@ -86,7 +86,8 @@ import { SearchBar } from '@nutui/nutui-react'
 
 | 屬性 | 說明 | 類型 | 默認值 |
 | --- | --- | --- | --- |
-| value | 當前輸入的值 | `string` | `-` |
+| value | 當前輸入的值，受控 | `string` | `-` |
+| defaultValue | 當前默認值，支持通過','分割成多個 | `string` | `-` |
 | placeholder | 輸入框默認暗紋 | `string` | `請輸入` |
 | shape | 搜索框形狀，可選值為 `round` | `string` | `square` |
 | disabled | 是否禁用輸入框 | `boolean` | `false` |
@@ -94,10 +95,10 @@ import { SearchBar } from '@nutui/nutui-react'
 | maxLength | 最大輸入長度 | `number` | `9999` |
 | clearable | 是否展示清除按鈕 | `boolean` | `true` |
 | autoFocus | 是否自動聚焦 | `boolean` | `false` |
-| backable | 是否展示返回按钮 | `boolean` | `false` |
+| backable | 是否展示返回按鈕 | `boolean` | `false` |
 | left | 搜索框左側區域 | `ReactNode` | `-` |
 | right | 搜搜框右側區域 | `ReactNode` | `-` |
-| leftIn | 輸入框內左側區域 | `ReactNode` | `<Search width="12" height="12" />` |
+| leftIn | 輸入框內左側區域 | `ReactNode` | `<Search />` |
 | rightIn | 輸入框內右側區域 | `ReactNode` | `-` |
 | onChange | 輸入內容時觸發 | `(value: string, event: ChangeEvent<HTMLInputElement>) => void` | `-` |
 | onFocus | 聚焦時觸發 | `(value: string, event: FocusEvent<HTMLInputElement>) => void` | `-` |
@@ -105,6 +106,7 @@ import { SearchBar } from '@nutui/nutui-react'
 | onClear | 點擊清空時觸發 | `(event: MouseEvent<HTMLDivElement>) => void` | `-` |
 | onSearch | 確定搜索時觸發 | `(val: string) => void` | `-` |
 | onInputClick | 點擊輸入區域時觸發 | `(event: MouseEvent<HTMLInputElement>) => void` | `-` |
+| onItemClick | 點擊默認值的x號觸發 | `(value: string) => void` | `-` |
 
 ## 主題定制
 

From 0e8cd46d2a48f1bc701b71034286a2fbf396c425 Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Tue, 29 Apr 2025 11:42:25 +0800
Subject: [PATCH 03/14] =?UTF-8?q?feat:=20taro=20=E7=89=88=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/searchbar/demo.taro.tsx          |  15 +--
 src/packages/searchbar/demo.tsx               |   4 +-
 src/packages/searchbar/demos/h5/demo1.tsx     |   5 +-
 src/packages/searchbar/demos/h5/demo10.tsx    |  16 ++-
 src/packages/searchbar/demos/h5/demo2.tsx     |   2 +-
 src/packages/searchbar/demos/h5/demo3.tsx     |   4 +-
 src/packages/searchbar/demos/h5/demo4.tsx     |   3 +-
 src/packages/searchbar/demos/h5/demo5.tsx     |   2 +-
 src/packages/searchbar/demos/h5/demo6.tsx     |   7 +-
 src/packages/searchbar/demos/h5/demo7.tsx     |   2 +-
 src/packages/searchbar/demos/taro/demo1.tsx   |  16 ++-
 src/packages/searchbar/demos/taro/demo10.tsx  |  52 ++++++++
 src/packages/searchbar/doc.en-US.md           |   8 ++
 src/packages/searchbar/doc.md                 |  10 +-
 src/packages/searchbar/doc.taro.md            |   8 ++
 src/packages/searchbar/doc.zh-TW.md           |   8 ++
 src/packages/searchbar/searchbar.taro.tsx     | 126 +++++++++++-------
 src/packages/searchbar/searchbar.tsx          |   7 +-
 .../doc/docs/taro/migrate-from-v2.md          |   7 +-
 19 files changed, 216 insertions(+), 86 deletions(-)
 create mode 100644 src/packages/searchbar/demos/taro/demo10.tsx

diff --git a/src/packages/searchbar/demo.taro.tsx b/src/packages/searchbar/demo.taro.tsx
index 679f03f7dc..96d6ffdb1f 100644
--- a/src/packages/searchbar/demo.taro.tsx
+++ b/src/packages/searchbar/demo.taro.tsx
@@ -12,11 +12,13 @@ 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 Demo10 from './demos/taro/demo10'
 
 const SearchBarDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
       title1: '基础用法',
+      title10: '默认值、受控',
       title2: '搜索框形状及最大长度',
       title3: '搜索框内外背景设置',
       title4: '搜索框文本设置',
@@ -26,6 +28,7 @@ const SearchBarDemo = () => {
     },
     'zh-TW': {
       title1: '基礎用法',
+      title10: '默認值、受控',
       title2: '蒐索框形狀及最大長度',
       title3: '蒐索框內外背景設定',
       title4: '蒐索框文字設定',
@@ -35,6 +38,7 @@ const SearchBarDemo = () => {
     },
     'en-US': {
       title1: 'Basic Usage',
+      title10: 'DefaultValue and controlled mode',
       title2: 'Search Box Shape And Maximum Length',
       title3: 'Background Settings Inside And Outside The Search Box',
       title4: 'Search Box Text Settings',
@@ -42,15 +46,6 @@ const SearchBarDemo = () => {
       title6: 'Data Change Monitoring',
       title7: 'Custom Settings',
     },
-    'id-ID': {
-      title1: 'penggunaan dasar',
-      title2: 'bentuk kotak pencarian dan panjang maksimum',
-      title3: 'pengaturan latar belakang di dalam dan diluar kotak pencarian',
-      title4: 'tetapan teks kotak pencarian',
-      title5: 'pengaturan ikon suai',
-      title6: 'Monitor perubahan data',
-      title7: 'pengaturan suai',
-    },
   })
 
   return (
@@ -59,6 +54,8 @@ const SearchBarDemo = () => {
       <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
         <View className="h2">{translated.title1}</View>
         <Demo1 />
+        <h2>{translated.title10}</h2>
+        <Demo10 />
         <View className="h2">{translated.title2}</View>
         <Demo2 />
         <View className="h2">{translated.title3}</View>
diff --git a/src/packages/searchbar/demo.tsx b/src/packages/searchbar/demo.tsx
index 5dfc3e96bb..c51863b781 100644
--- a/src/packages/searchbar/demo.tsx
+++ b/src/packages/searchbar/demo.tsx
@@ -24,7 +24,7 @@ const SearchBarDemo = () => {
     },
     'zh-TW': {
       title1: '基礎用法',
-      title10: '默认值、受控',
+      title10: '默認值、受控',
       title2: '蒐索框形狀及最大長度',
       title3: '蒐索框內外背景設定',
       title4: '蒐索框文字設定',
@@ -34,7 +34,7 @@ const SearchBarDemo = () => {
     },
     'en-US': {
       title1: 'Basic Usage',
-      title10: '默认值、受控',
+      title10: 'DefaultValue and controlled mode',
       title2: 'Search Box Shape And Maximum Length',
       title3: 'Background Settings Inside And Outside The Search Box',
       title4: 'Search Box Text Settings',
diff --git a/src/packages/searchbar/demos/h5/demo1.tsx b/src/packages/searchbar/demos/h5/demo1.tsx
index 0549695dd5..563bc43653 100644
--- a/src/packages/searchbar/demos/h5/demo1.tsx
+++ b/src/packages/searchbar/demos/h5/demo1.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import { Photograph, Scan } from '@nutui/icons-react'
-import { SearchBar } from '../../searchbar'
-import Divider from '@/packages/divider'
+import { SearchBar, Divider } from '@nutui/nutui-react'
 
 const Demo1 = () => {
   return (
@@ -12,7 +11,7 @@ const Demo1 = () => {
         placeholder="华为Mate 70"
         rightIn={
           <div style={{ display: 'flex', alignItems: 'center' }}>
-            <Photograph color="#888B94" />
+            <Photograph color="#888B94" onClick={() => console.log('拍照购')} />
             <Divider direction="vertical" />
             <span style={{ color: '#ff0f23' }}>搜索</span>
           </div>
diff --git a/src/packages/searchbar/demos/h5/demo10.tsx b/src/packages/searchbar/demos/h5/demo10.tsx
index 6f27ca4724..a248f66a88 100644
--- a/src/packages/searchbar/demos/h5/demo10.tsx
+++ b/src/packages/searchbar/demos/h5/demo10.tsx
@@ -1,21 +1,27 @@
 import React, { useState } from 'react'
-import { Category, Photograph } from '@nutui/icons-react'
-import { SearchBar } from '../../searchbar'
-import Button from '@/packages/button'
+import { SearchBar, Button } from '@nutui/nutui-react'
+import { Photograph, Category } from '@nutui/icons-react'
 
-const Demo1 = () => {
+const Demo = () => {
   const [dvalue, setDvalue] = useState('西红柿,铁皮')
   const [value, setValue] = useState('西红柿')
+  const [value1, setValue1] = useState('')
   return (
     <>
       <SearchBar
         backable
         leftIn={null}
         defaultValue={dvalue}
+        value={value1}
         onItemClick={(value: string) => {
           console.log('click', value)
           setDvalue('黄瓜')
         }}
+        onFocus={() => {
+          console.log('focus')
+          setValue1(dvalue)
+          setDvalue('')
+        }}
         rightIn={
           <div style={{ display: 'flex', alignItems: 'center' }}>
             <Photograph color="#505259" />
@@ -43,4 +49,4 @@ const Demo1 = () => {
     </>
   )
 }
-export default Demo1
+export default Demo
diff --git a/src/packages/searchbar/demos/h5/demo2.tsx b/src/packages/searchbar/demos/h5/demo2.tsx
index 7130330f02..4408c74c39 100644
--- a/src/packages/searchbar/demos/h5/demo2.tsx
+++ b/src/packages/searchbar/demos/h5/demo2.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { SearchBar } from '../../searchbar'
+import { SearchBar } from '@nutui/nutui-react'
 
 const Demo2 = () => {
   return (
diff --git a/src/packages/searchbar/demos/h5/demo3.tsx b/src/packages/searchbar/demos/h5/demo3.tsx
index 5b81c00b71..6787fedf9b 100644
--- a/src/packages/searchbar/demos/h5/demo3.tsx
+++ b/src/packages/searchbar/demos/h5/demo3.tsx
@@ -1,7 +1,5 @@
 import React from 'react'
-import { SearchBar } from '../../searchbar'
-import ConfigProvider from '../../../configprovider'
-import Toast from '../../../toast'
+import { SearchBar, ConfigProvider, Toast } from '@nutui/nutui-react'
 
 const Demo3 = () => {
   return (
diff --git a/src/packages/searchbar/demos/h5/demo4.tsx b/src/packages/searchbar/demos/h5/demo4.tsx
index c6b63af04f..4c96fca687 100644
--- a/src/packages/searchbar/demos/h5/demo4.tsx
+++ b/src/packages/searchbar/demos/h5/demo4.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
-import { SearchBar } from '../../searchbar'
-import Toast from '../../../toast'
+import { SearchBar, Toast } from '@nutui/nutui-react'
 
 const Demo4 = () => {
   return (
diff --git a/src/packages/searchbar/demos/h5/demo5.tsx b/src/packages/searchbar/demos/h5/demo5.tsx
index 16a076dc1e..6ec0d38c9b 100644
--- a/src/packages/searchbar/demos/h5/demo5.tsx
+++ b/src/packages/searchbar/demos/h5/demo5.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { ArrowLeft, Photograph, More, Close, Star } from '@nutui/icons-react'
-import { SearchBar } from '../../searchbar'
+import { SearchBar } from '@nutui/nutui-react'
 
 const Demo5 = () => {
   return (
diff --git a/src/packages/searchbar/demos/h5/demo6.tsx b/src/packages/searchbar/demos/h5/demo6.tsx
index 47bb48f986..355b15a6fe 100644
--- a/src/packages/searchbar/demos/h5/demo6.tsx
+++ b/src/packages/searchbar/demos/h5/demo6.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import { ArrowDown } from '@nutui/icons-react'
-import { SearchBar } from '../../searchbar'
-import PopOver from '../../../popover'
+import { SearchBar, Popover } from '@nutui/nutui-react'
 
 const Demo6 = () => {
   const itemList = [
@@ -14,7 +13,7 @@ const Demo6 = () => {
     <>
       <SearchBar
         leftIn={
-          <PopOver
+          <Popover
             visible={lightTheme}
             onClick={() => {
               lightTheme ? setLightTheme(false) : setLightTheme(true)
@@ -25,7 +24,7 @@ const Demo6 = () => {
               更多
               <ArrowDown />
             </div>
-          </PopOver>
+          </Popover>
         }
       />
     </>
diff --git a/src/packages/searchbar/demos/h5/demo7.tsx b/src/packages/searchbar/demos/h5/demo7.tsx
index 7fa543d515..cc14be40c5 100644
--- a/src/packages/searchbar/demos/h5/demo7.tsx
+++ b/src/packages/searchbar/demos/h5/demo7.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { SearchBar } from '../../searchbar'
+import { SearchBar } from '@nutui/nutui-react'
 
 const Demo7 = () => {
   const [value, setValue] = useState('')
diff --git a/src/packages/searchbar/demos/taro/demo1.tsx b/src/packages/searchbar/demos/taro/demo1.tsx
index 2723d9fd4b..31c9e54ae8 100644
--- a/src/packages/searchbar/demos/taro/demo1.tsx
+++ b/src/packages/searchbar/demos/taro/demo1.tsx
@@ -1,10 +1,22 @@
 import React from 'react'
-import { SearchBar } from '@nutui/nutui-react-taro'
+import { SearchBar, Divider } from '@nutui/nutui-react-taro'
+import { Photograph, Scan } from '@nutui/icons-react'
 
 const Demo1 = () => {
   return (
     <>
-      <SearchBar backable placeholder="上京东，购好物" />
+      <SearchBar placeholder="麻辣烫" rightIn="搜索" />
+      <SearchBar
+        leftIn={<Scan />}
+        placeholder="华为Mate 70"
+        rightIn={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <Photograph color="#888B94" onClick={() => console.log('拍照购')} />
+            <Divider direction="vertical" />
+            <span style={{ color: '#ff0f23' }}>搜索</span>
+          </div>
+        }
+      />
     </>
   )
 }
diff --git a/src/packages/searchbar/demos/taro/demo10.tsx b/src/packages/searchbar/demos/taro/demo10.tsx
new file mode 100644
index 0000000000..07d17beb85
--- /dev/null
+++ b/src/packages/searchbar/demos/taro/demo10.tsx
@@ -0,0 +1,52 @@
+import React, { useState } from 'react'
+import { SearchBar, Button } from '@nutui/nutui-react-taro'
+import { Photograph, Category } from '@nutui/icons-react-taro'
+
+const Demo1 = () => {
+  const [dvalue, setDvalue] = useState('西红柿,铁皮')
+  const [value, setValue] = useState('西红柿')
+  const [value1, setValue1] = useState('')
+  return (
+    <>
+      <SearchBar
+        backable
+        leftIn={null}
+        defaultValue={dvalue}
+        value={value1}
+        onItemClick={(value: string) => {
+          console.log('click', value)
+          setDvalue('黄瓜')
+        }}
+        onFocus={() => {
+          console.log('focus')
+          setValue1(dvalue)
+          setDvalue('')
+        }}
+        rightIn={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <Photograph color="#505259" />
+          </div>
+        }
+        right={<Category />}
+      />
+      <SearchBar
+        backable
+        leftIn={null}
+        value={value}
+        onChange={(val) => {
+          setValue(val)
+        }}
+        autoFocus
+        rightIn={
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <Photograph color="#505259" style={{ marginRight: '12px' }} />
+            <Button type="primary" size="mini">
+              搜索
+            </Button>
+          </div>
+        }
+      />
+    </>
+  )
+}
+export default Demo1
diff --git a/src/packages/searchbar/doc.en-US.md b/src/packages/searchbar/doc.en-US.md
index acdd99af30..81f2089885 100644
--- a/src/packages/searchbar/doc.en-US.md
+++ b/src/packages/searchbar/doc.en-US.md
@@ -20,6 +20,14 @@ import { SearchBar } from '@nutui/nutui-react'
 
 :::
 
+### DefaultValue And Controlled
+
+:::demo
+
+<CodeBlock src='h5/demo10.tsx'></CodeBlock>
+
+:::
+
 ### Search box shape and maximum length
 
 `SearchBar`'s `shape` Attribute supports defining fillet right angles，`maxLength` Can control the maximum length of input characters。
diff --git a/src/packages/searchbar/doc.md b/src/packages/searchbar/doc.md
index 5acaed01d1..eca6026a15 100644
--- a/src/packages/searchbar/doc.md
+++ b/src/packages/searchbar/doc.md
@@ -12,14 +12,20 @@ import { SearchBar } from '@nutui/nutui-react'
 
 ### 基础用法
 
-`SearchBar` 的 `placeholder` 属性支持自定义。
-
 :::demo
 
 <CodeBlock src='h5/demo1.tsx'></CodeBlock>
 
 :::
 
+### 默认值、受控模式
+
+:::demo
+
+<CodeBlock src='h5/demo10.tsx'></CodeBlock>
+
+:::
+
 ### 搜索框形状及最大长度
 
 `SearchBar` 的 `shape` 属性支持定义圆角直角，`maxLength` 可控制输入字符的最大长度。
diff --git a/src/packages/searchbar/doc.taro.md b/src/packages/searchbar/doc.taro.md
index 33f160f7f2..88e64d1e28 100644
--- a/src/packages/searchbar/doc.taro.md
+++ b/src/packages/searchbar/doc.taro.md
@@ -20,6 +20,14 @@ import { SearchBar } from '@nutui/nutui-react-taro'
 
 :::
 
+### 默认值、受控模式
+
+:::demo
+
+<CodeBlock src='taro/demo10.tsx'></CodeBlock>
+
+:::
+
 ### 搜索框形状及最大长度
 
 `SearchBar` 的 `shape` 属性支持定义圆角直角，`maxLength` 可控制输入字符的最大长度。
diff --git a/src/packages/searchbar/doc.zh-TW.md b/src/packages/searchbar/doc.zh-TW.md
index 7b2fcd74c5..270bdca29c 100644
--- a/src/packages/searchbar/doc.zh-TW.md
+++ b/src/packages/searchbar/doc.zh-TW.md
@@ -20,6 +20,14 @@ import { SearchBar } from '@nutui/nutui-react'
 
 :::
 
+### 默認值、受控
+
+:::demo
+
+<CodeBlock src='h5/demo10.tsx'></CodeBlock>
+
+:::
+
 ### 搜索框形狀及最大長度
 
 `SearchBar` 的 `shape` 屬性支持定義圓角直角，`maxLength` 可控制輸入字符的最大長度。
diff --git a/src/packages/searchbar/searchbar.taro.tsx b/src/packages/searchbar/searchbar.taro.tsx
index 21e87d39d6..c013d84446 100644
--- a/src/packages/searchbar/searchbar.taro.tsx
+++ b/src/packages/searchbar/searchbar.taro.tsx
@@ -1,5 +1,5 @@
 import Taro from '@tarojs/taro'
-import React, { FunctionComponent, useEffect, useRef, useState } from 'react'
+import React, { FunctionComponent, useEffect, useRef } from 'react'
 import {
   Input as TaroInput,
   ITouchEvent,
@@ -7,10 +7,12 @@ import {
   View,
   BaseEventOrig,
 } from '@tarojs/components'
-import { ArrowLeft, MaskClose, Search } from '@nutui/icons-react-taro'
+import { ArrowLeft, Close, MaskClose, Search } from '@nutui/icons-react-taro'
+import classNames from 'classnames'
 import { useConfig } from '@/packages/configprovider/index.taro'
 import { ComponentDefaults } from '@/utils/typings'
 import { TaroSearchBarProps } from '@/types'
+import { usePropsValue } from '@/hooks/use-props-value'
 
 const defaultProps = {
   ...ComponentDefaults,
@@ -25,7 +27,7 @@ const defaultProps = {
   left: '',
   right: '',
   rightIn: '',
-  leftIn: <Search size="16" />,
+  leftIn: <Search />,
 } as TaroSearchBarProps
 export const SearchBar: FunctionComponent<
   Partial<TaroSearchBarProps> &
@@ -37,10 +39,10 @@ export const SearchBar: FunctionComponent<
   const classPrefix = 'nut-searchbar'
 
   const { locale } = useConfig()
-  const searchRef = useRef<HTMLInputElement | null>(null)
-
+  const searchInputRef = useRef<HTMLInputElement>(null)
   const {
     value: outerValue,
+    defaultValue,
     style,
     placeholder,
     shape,
@@ -61,47 +63,57 @@ export const SearchBar: FunctionComponent<
     onClear,
     onSearch,
     onInputClick,
+    onItemClick,
   } = {
     ...defaultProps,
     ...props,
   }
 
-  const [value, setValue] = useState(() => outerValue)
+  const [value, setValue] = usePropsValue<string>({
+    value: outerValue,
+    defaultValue,
+    finalValue: '',
+  })
+
+  useEffect(() => {
+    setValue(defaultValue)
+  }, [defaultValue])
 
   const forceFocus = () => {
-    const searchSelf: HTMLInputElement | null = searchRef.current
+    const searchSelf: HTMLInputElement | null = searchInputRef.current
     searchSelf && searchSelf.focus()
   }
   const onInput = (event: BaseEventOrig<InputProps.inputEventDetail>) => {
     const eventValue = event?.detail?.value
     if (value === eventValue) return
-    onChange && onChange?.(eventValue, event)
+    onChange && onChange(eventValue, event)
     setValue(eventValue)
     eventValue === '' && forceFocus()
   }
-  const focus = (event: BaseEventOrig<InputProps.inputForceEventDetail>) => {
+  const handleFocus = (
+    event: BaseEventOrig<InputProps.inputForceEventDetail>
+  ) => {
     onFocus && onFocus(event?.detail?.value, event)
   }
-  const blur = (event: BaseEventOrig<InputProps.inputValueEventDetail>) => {
-    const searchSelf: HTMLInputElement | null = searchRef.current
+  const handleBlur = (
+    event: BaseEventOrig<InputProps.inputValueEventDetail>
+  ) => {
+    const searchSelf: HTMLInputElement | null = searchInputRef.current
     searchSelf && searchSelf.blur()
     onBlur && onBlur(event?.detail?.value, event)
   }
-  useEffect(() => {
-    setValue(outerValue || '')
-  }, [outerValue])
+
   useEffect(() => {
     if (Taro.getEnv() === 'WEB') {
       autoFocus && forceFocus()
     }
   }, [autoFocus])
   const renderField = () => {
+    const inputCls = classNames(`${classPrefix}-input`)
     return (
       <TaroInput
-        className={`${classPrefix}-input ${
-          clearable ? `${classPrefix}-input-clear` : ''
-        }`}
-        ref={searchRef}
+        className={inputCls}
+        ref={searchInputRef}
         style={style}
         value={(value || '').toString()}
         placeholder={placeholder || locale.placeholder}
@@ -109,15 +121,30 @@ export const SearchBar: FunctionComponent<
         maxlength={maxLength}
         autoFocus={autoFocus}
         onInput={onInput}
-        onFocus={focus}
-        onBlur={blur}
-        onClick={clickInput}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        onClick={onInputClick}
         onConfirm={onConfirm}
       />
     )
   }
-  const clickInput = (e: ITouchEvent) => {
-    onInputClick && onInputClick(e)
+
+  const renderDefaultValue = () => {
+    const list = defaultValue.split(',')
+    return (
+      <View className="nut-searchbar-values">
+        {list.map((item, index) => (
+          <View
+            key={`def-${index}`}
+            className="nut-searchbar-value"
+            onClick={() => onItemClick(item)}
+          >
+            {item}
+            <Close />
+          </View>
+        ))}
+      </View>
+    )
   }
   const renderLeftIn = () => {
     if (!leftIn) return null
@@ -131,61 +158,70 @@ export const SearchBar: FunctionComponent<
     if (!backable && !left) return null
     return (
       <View className={`${classPrefix}-left`}>
-        {backable ? <ArrowLeft size="16" /> : left}
+        {backable ? <ArrowLeft /> : left}
       </View>
     )
   }
   const renderRightIn = () => {
     if (!rightIn) return null
     return (
-      <View className={`${classPrefix}-rightin ${classPrefix}-icon`}>
-        {rightIn}
-      </View>
+      <>
+        {React.isValidElement(rightIn) ? (
+          <View className={`${classPrefix}-rightin ${classPrefix}-icon`}>
+            {rightIn}
+          </View>
+        ) : (
+          <View className={`${classPrefix}-rightin`}>{rightIn}</View>
+        )}
+      </>
     )
   }
   const renderRight = () => {
     if (!right) return null
     return <View className={`${classPrefix}-right`}>{right}</View>
   }
-  const handleClear = () => {
+  const renderClear = () => {
     return (
       <View
-        className={`${classPrefix}-clear  ${classPrefix}-icon`}
+        className={`${classPrefix}-clear ${classPrefix}-icon`}
         onClick={(e: any) => clearaVal(e)}
       >
-        <MaskClose size={16} />
+        <MaskClose />
       </View>
     )
   }
   const clearaVal = (event: ITouchEvent) => {
-    if (disabled || readOnly) {
-      return
-    }
+    if (disabled || readOnly) return
     setValue('')
     forceFocus()
-    onChange && onChange?.('')
+    onChange && onChange('')
     onClear && onClear(event)
   }
   const onConfirm = () => {
     onSearch && onSearch(value as string)
   }
+
+  const cls = classNames(
+    classPrefix,
+    {
+      [`${classPrefix}-disabled`]: disabled,
+      [`${classPrefix}-focus`]: left || backable,
+    },
+    className
+  )
   return (
-    <View
-      className={`${classPrefix} ${
-        disabled ? `${classPrefix}-disabled` : ''
-      }  ${className || ''}`}
-      style={style}
-    >
+    <View className={cls} style={style}>
       {renderLeft()}
       <View
-        className={`${classPrefix}-content ${
-          shape === 'round' ? `${classPrefix}-round` : ''
-        }`}
+        className={classNames(`${classPrefix}-content`, {
+          [`${classPrefix}-round`]: shape === 'round',
+        })}
       >
         {renderLeftIn()}
         <View className="nut-searchbar-input-box">{renderField()}</View>
-        {clearable && !value && renderRightIn()}
-        {clearable && value && handleClear()}
+        {defaultValue && renderDefaultValue()}
+        {!defaultValue && clearable && value && renderClear()}
+        {renderRightIn()}
       </View>
       {renderRight()}
     </View>
diff --git a/src/packages/searchbar/searchbar.tsx b/src/packages/searchbar/searchbar.tsx
index 343c0f0b41..8f9a54110a 100644
--- a/src/packages/searchbar/searchbar.tsx
+++ b/src/packages/searchbar/searchbar.tsx
@@ -33,7 +33,6 @@ export const SearchBar: FunctionComponent<
 
   const { locale } = useConfig()
   const searchInputRef = useRef<HTMLInputElement>(null)
-
   const {
     value: outerValue,
     defaultValue,
@@ -85,15 +84,13 @@ export const SearchBar: FunctionComponent<
   }
 
   const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
-    const { value } = event.target
-    onFocus && onFocus(value, event)
+    onFocus && onFocus(event?.target?.value, event)
   }
 
   const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
     const searchSelf: HTMLInputElement | null = searchInputRef.current
     searchSelf && searchSelf.blur()
-    const { value } = event.target
-    onBlur && onBlur(value, event)
+    onBlur && onBlur(event?.target?.value, event)
   }
 
   useEffect(() => {
diff --git a/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md b/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md
index 8e5f97ab0c..a9b98e450d 100644
--- a/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md
+++ b/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md
@@ -179,7 +179,12 @@ plugins: [
 - 新增 size 属性，控制图标的大小
 - 新增 showScore 属性，展示评分文案
 
-[//]: # '#### SearchBar'
+#### SearchBar
+
+- `value` 属性，支持受控
+- 新增 `defaultValue` 属性，用于搜索默认值，支持以','分割的字符串，用以展示为多个
+- 新增 `onItemClick` 属性，用于点击展示默认值时的x号，支持回调处理
+
 [//]: # '#### ShortPassword'
 
 #### TextArea

From 202063c0d544b266b8d26f96cb498606e01206ed Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Tue, 29 Apr 2025 14:42:21 +0800
Subject: [PATCH 04/14] =?UTF-8?q?feat:=20=E9=80=82=E9=85=8D=E9=B8=BF?=
 =?UTF-8?q?=E8=92=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/searchbar/demo.taro.tsx         |  2 +-
 src/packages/searchbar/demos/h5/demo10.tsx   | 19 ++++++++++++----
 src/packages/searchbar/demos/taro/demo1.tsx  |  2 +-
 src/packages/searchbar/demos/taro/demo10.tsx | 23 +++++++++++++++-----
 src/packages/searchbar/searchbar.scss        | 15 +++++++++----
 src/packages/searchbar/searchbar.taro.tsx    |  6 +++--
 6 files changed, 49 insertions(+), 18 deletions(-)

diff --git a/src/packages/searchbar/demo.taro.tsx b/src/packages/searchbar/demo.taro.tsx
index 96d6ffdb1f..7e06e80f08 100644
--- a/src/packages/searchbar/demo.taro.tsx
+++ b/src/packages/searchbar/demo.taro.tsx
@@ -54,7 +54,7 @@ const SearchBarDemo = () => {
       <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
         <View className="h2">{translated.title1}</View>
         <Demo1 />
-        <h2>{translated.title10}</h2>
+        <View className="h2">{translated.title10}</View>
         <Demo10 />
         <View className="h2">{translated.title2}</View>
         <Demo2 />
diff --git a/src/packages/searchbar/demos/h5/demo10.tsx b/src/packages/searchbar/demos/h5/demo10.tsx
index a248f66a88..9657d936fd 100644
--- a/src/packages/searchbar/demos/h5/demo10.tsx
+++ b/src/packages/searchbar/demos/h5/demo10.tsx
@@ -15,12 +15,23 @@ const Demo = () => {
         value={value1}
         onItemClick={(value: string) => {
           console.log('click', value)
-          setDvalue('黄瓜')
+          if (dvalue) {
+            const arr = dvalue.split(',')
+            const newArr = arr.filter((item: string) => item !== value)
+            const newVal = newArr.length > 1 ? newArr.join(',') : newArr[0]
+            setValue1(newVal)
+            setDvalue(newVal)
+          }
         }}
         onFocus={() => {
-          console.log('focus')
-          setValue1(dvalue)
-          setDvalue('')
+          console.log('focus dvalue', dvalue)
+          if (dvalue) {
+            setValue1(dvalue)
+            setDvalue('')
+          }
+        }}
+        onChange={(val) => {
+          setValue1(val)
         }}
         rightIn={
           <div style={{ display: 'flex', alignItems: 'center' }}>
diff --git a/src/packages/searchbar/demos/taro/demo1.tsx b/src/packages/searchbar/demos/taro/demo1.tsx
index 31c9e54ae8..2bdd1c1753 100644
--- a/src/packages/searchbar/demos/taro/demo1.tsx
+++ b/src/packages/searchbar/demos/taro/demo1.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { SearchBar, Divider } from '@nutui/nutui-react-taro'
-import { Photograph, Scan } from '@nutui/icons-react'
+import { Photograph, Scan } from '@nutui/icons-react-taro'
 
 const Demo1 = () => {
   return (
diff --git a/src/packages/searchbar/demos/taro/demo10.tsx b/src/packages/searchbar/demos/taro/demo10.tsx
index 07d17beb85..522dc35463 100644
--- a/src/packages/searchbar/demos/taro/demo10.tsx
+++ b/src/packages/searchbar/demos/taro/demo10.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { SearchBar, Button } from '@nutui/nutui-react-taro'
 import { Photograph, Category } from '@nutui/icons-react-taro'
 
-const Demo1 = () => {
+const Demo = () => {
   const [dvalue, setDvalue] = useState('西红柿,铁皮')
   const [value, setValue] = useState('西红柿')
   const [value1, setValue1] = useState('')
@@ -15,12 +15,23 @@ const Demo1 = () => {
         value={value1}
         onItemClick={(value: string) => {
           console.log('click', value)
-          setDvalue('黄瓜')
+          if (dvalue) {
+            const arr = dvalue.split(',')
+            const newArr = arr.filter((item: string) => item !== value)
+            const newVal = newArr.length > 1 ? newArr.join(',') : newArr[0]
+            setValue1(newVal)
+            setDvalue(newVal)
+          }
         }}
         onFocus={() => {
-          console.log('focus')
-          setValue1(dvalue)
-          setDvalue('')
+          console.log('focus dvalue', dvalue)
+          if (dvalue) {
+            setValue1(dvalue)
+            setDvalue('')
+          }
+        }}
+        onChange={(val) => {
+          setValue1(val)
         }}
         rightIn={
           <div style={{ display: 'flex', alignItems: 'center' }}>
@@ -49,4 +60,4 @@ const Demo1 = () => {
     </>
   )
 }
-export default Demo1
+export default Demo
diff --git a/src/packages/searchbar/searchbar.scss b/src/packages/searchbar/searchbar.scss
index ab50311eba..e00a074dba 100644
--- a/src/packages/searchbar/searchbar.scss
+++ b/src/packages/searchbar/searchbar.scss
@@ -72,16 +72,20 @@
 
   &-clear {
     &.nut-searchbar-icon {
-      width: 12px;
-      height: 12px;
-      color: var(--nutui-black-5);
-      margin-right: $searchbar-inner-gap;
+      .nut-icon {
+        width: 12px;
+        height: 12px;
+        color: var(--nutui-black-5);
+        margin-right: $searchbar-inner-gap;
+      }
     }
   }
 
   &-values {
     position: absolute;
     display: flex;
+    flex-direction: row;
+    z-index: 2;
     background-color: #fff;
     top: 9px;
     left: 6px;
@@ -89,6 +93,9 @@
     line-height: 12px;
 
     .nut-searchbar-value {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
       padding: 4px 8px;
       background-color: #f7f8fc;
       border-radius: 4px;
diff --git a/src/packages/searchbar/searchbar.taro.tsx b/src/packages/searchbar/searchbar.taro.tsx
index c013d84446..2d5484ab02 100644
--- a/src/packages/searchbar/searchbar.taro.tsx
+++ b/src/packages/searchbar/searchbar.taro.tsx
@@ -218,8 +218,10 @@ export const SearchBar: FunctionComponent<
         })}
       >
         {renderLeftIn()}
-        <View className="nut-searchbar-input-box">{renderField()}</View>
-        {defaultValue && renderDefaultValue()}
+        <View className="nut-searchbar-input-box">
+          {renderField()}
+          {defaultValue && renderDefaultValue()}
+        </View>
         {!defaultValue && clearable && value && renderClear()}
         {renderRightIn()}
       </View>

From f174e0da153c8eb1a7c5d1dc42f09ae9cc8458b3 Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Tue, 29 Apr 2025 14:52:59 +0800
Subject: [PATCH 05/14] =?UTF-8?q?fix:=20=E4=B8=BB=E9=A2=98=E5=90=8C?=
 =?UTF-8?q?=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/configprovider/types.ts | 3 ++-
 src/styles/variables-jmapp.scss      | 6 ++----
 src/styles/variables-jrkf.scss       | 6 ++----
 src/styles/variables.scss            | 2 +-
 4 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/packages/configprovider/types.ts b/src/packages/configprovider/types.ts
index 02ce83e765..51b299fb93 100644
--- a/src/packages/configprovider/types.ts
+++ b/src/packages/configprovider/types.ts
@@ -655,11 +655,12 @@ export type NutCSSVariables =
   | 'nutuiSearchbarBackground'
   | 'nutuiSearchbarColor'
   | 'nutuiSearchbarGap'
+  | 'nutuiSearchbarInnerGap'
   | 'nutuiSearchbarFontSize'
-  | 'nutuiSearchbarContentPadding'
   | 'nutuiSearchbarContentBackground'
   | 'nutuiSearchbarContentBorderRadius'
   | 'nutuiSearchbarContentRoundBorderRadius'
+  | 'nutuiSearchbarIconSize'
   | 'nutuiSearchbarInputHeight'
   | 'nutuiSearchbarInputPadding'
   | 'nutuiSearchbarInputTextColor'
diff --git a/src/styles/variables-jmapp.scss b/src/styles/variables-jmapp.scss
index c84de5194a..f8ef54982f 100644
--- a/src/styles/variables-jmapp.scss
+++ b/src/styles/variables-jmapp.scss
@@ -2040,14 +2040,11 @@ $searchbar-background: var(
 ) !default;
 $searchbar-color: var(--nutui-searchbar-color, $color-title) !default;
 $searchbar-gap: var(--nutui-searchbar-gap, 16px) !default;
+$searchbar-inner-gap: var(--nutui-searchbar-inner-gap, 8px) !default;
 $searchbar-font-size: var(
   --nutui-searchbar-font-size,
   $font-size-base
 ) !default;
-$searchbar-content-padding: var(
-  --nutui-searchbar-content-padding,
-  0 12px
-) !default;
 $searchbar-content-background: var(
   --nutui-searchbar-content-background,
   $color-default-light
@@ -2060,6 +2057,7 @@ $searchbar-content-round-border-radius: var(
   --nutui-searchbar-content-round-border-radius,
   18px
 ) !default;
+$searchbar-icon-size: var(--nutui-searchbar-icon-size, 20px) !default;
 $searchbar-input-height: var(--nutui-searchbar-input-height, 36px) !default;
 $searchbar-input-padding: var(
   --nutui-searchbar-input-padding,
diff --git a/src/styles/variables-jrkf.scss b/src/styles/variables-jrkf.scss
index b5a0ba6295..534b6b8198 100644
--- a/src/styles/variables-jrkf.scss
+++ b/src/styles/variables-jrkf.scss
@@ -2146,14 +2146,11 @@ $searchbar-background: var(
 ) !default;
 $searchbar-color: var(--nutui-searchbar-color, $color-text-title) !default;
 $searchbar-gap: var(--nutui-searchbar-gap, 16px) !default;
+$searchbar-inner-gap: var(--nutui-searchbar-inner-gap, 8px) !default;
 $searchbar-font-size: var(
   --nutui-searchbar-font-size,
   $font-size-base
 ) !default;
-$searchbar-content-padding: var(
-  --nutui-searchbar-content-padding,
-  0 12px
-) !default;
 $searchbar-content-background: var(
   --nutui-searchbar-content-background,
   $color-default-light
@@ -2166,6 +2163,7 @@ $searchbar-content-round-border-radius: var(
   --nutui-searchbar-content-round-border-radius,
   18px
 ) !default;
+$searchbar-icon-size: var(--nutui-searchbar-icon-size, 20px) !default;
 $searchbar-input-height: var(--nutui-searchbar-input-height, 36px) !default;
 $searchbar-input-padding: var(
   --nutui-searchbar-input-padding,
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 508b27a4da..3e9a8e84f3 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1950,7 +1950,7 @@ $searchbar-content-round-border-radius: var(
   --nutui-searchbar-content-round-border-radius,
   19px
 ) !default;
-$searchbar-icon-size: var(--nutui-searchbar-icon-size, 20px);
+$searchbar-icon-size: var(--nutui-searchbar-icon-size, 20px) !default;
 $searchbar-input-height: var(--nutui-searchbar-input-height, 38px) !default;
 $searchbar-input-padding: var(
   --nutui-searchbar-input-padding,

From ec8d87f2d6fcd985517f2a30c4f1304154a673fa Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Tue, 29 Apr 2025 17:51:58 +0800
Subject: [PATCH 06/14] test: fixed

---
 .../searchbar/__tests__/searchbar.spec.tsx    | 95 ++++++++++++++-----
 src/packages/searchbar/searchbar.tsx          |  3 +-
 2 files changed, 72 insertions(+), 26 deletions(-)

diff --git a/src/packages/searchbar/__tests__/searchbar.spec.tsx b/src/packages/searchbar/__tests__/searchbar.spec.tsx
index 0ed6bf7f3a..82373544ea 100644
--- a/src/packages/searchbar/__tests__/searchbar.spec.tsx
+++ b/src/packages/searchbar/__tests__/searchbar.spec.tsx
@@ -1,28 +1,24 @@
 import * as React from 'react'
-import { fireEvent, render } from '@testing-library/react'
+import { render, fireEvent, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
+import { useState } from 'react'
 import SearchBar from '@/packages/searchbar'
 
-test('basic usage', () => {
-  const { container } = render(<SearchBar placeholder="请输入文字" />)
-  expect(container.querySelector('.nut-searchbar-input')).toHaveAttribute(
-    'placeholder',
-    '请输入文字'
+test('should render with placeholder', () => {
+  const { getByPlaceholderText } = render(
+    <SearchBar placeholder="请输入文字" />
   )
+  expect(getByPlaceholderText('请输入文字')).toBeInTheDocument()
 })
 
 test('should limit maxlength of input value when using maxlength prop', () => {
   const { container } = render(<SearchBar shape="round" maxLength={5} />)
-  expect(container.querySelector('.nut-searchbar-input')).toHaveAttribute(
-    'maxlength',
-    '5'
-  )
-  expect(container.querySelector('.nut-searchbar-content')).toHaveClass(
-    'nut-searchbar-round'
-  )
+  const input = container.querySelector('.nut-searchbar-input')
+  expect(input).toHaveAttribute('maxlength', '5')
+  expect(input?.parentNode).toHaveClass('nut-searchbar-round')
 })
 
-test('Search box text settings', () => {
+test('should display left and right text', () => {
   const { container } = render(<SearchBar left="文本" right="确定" />)
   expect(container.querySelector('.nut-searchbar-left')?.innerHTML).toBe('文本')
   expect(container.querySelector('.nut-searchbar-right')?.innerHTML).toBe(
@@ -30,15 +26,64 @@ test('Search box text settings', () => {
   )
 })
 
-test('Search clear & change', () => {
-  const change = vi.fn()
-  const { container } = render(
-    <SearchBar value="123" onChange={change} maxLength={10} />
-  )
-  const input = container.querySelector('.nut-searchbar-input')
-  expect(input?.getAttribute('value')).toBe('123')
-  const clear = container.querySelector('.nut-searchbar-clear')
-  fireEvent.click(clear as Element)
-  expect(change).toBeCalledWith('')
-  expect(input?.getAttribute('value')).toBe('')
+test('should render with default value', () => {
+  const { container } = render(<SearchBar defaultValue="123" />)
+  const dvalues = container.querySelectorAll('.nut-searchbar-value')
+  expect(dvalues.length).toBe(1)
+})
+
+test('should render right-in element', () => {
+  const { container, rerender } = render(<SearchBar rightIn="搜索" />)
+  const rightin = container.querySelectorAll('.nut-searchbar-rightin')
+  expect(rightin.length).toBe(1)
+  rerender(<SearchBar rightIn={<div className="test">搜索</div>} />)
+  const test = container.querySelectorAll('.test')
+  expect(test.length).toBe(1)
+})
+
+test('should handle all events correctly', async () => {
+  const handleChange = vi.fn()
+  const handleFocus = vi.fn()
+  const handleBlur = vi.fn()
+  const handleClick = vi.fn()
+  const handleClear = vi.fn()
+  const Demo = () => {
+    const [value, setValue] = useState('奶茶')
+    const onChange = (newValue: string) => {
+      setValue(newValue) // 更新状态
+      handleChange(newValue) // 调用传入的 onChange 处理函数
+    }
+    return (
+      <SearchBar
+        value={value}
+        autoFocus
+        onChange={onChange}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        onInputClick={handleClick}
+        onClear={handleClear}
+      />
+    )
+  }
+
+  const { container } = render(<Demo />)
+  const inputEl = container.querySelector('.nut-searchbar-input') as Element
+  expect(inputEl).toHaveValue('奶茶')
+  fireEvent.click(inputEl)
+  expect(handleClick).toHaveBeenCalledTimes(1)
+  fireEvent.change(inputEl, { target: { value: '冰激凌' } })
+
+  await waitFor(() => {
+    expect(handleFocus).toHaveBeenCalledTimes(1)
+    expect(handleChange).toHaveBeenCalledTimes(1)
+    expect(inputEl).toHaveValue('冰激凌')
+    fireEvent.blur(inputEl)
+    expect(handleBlur).toHaveBeenCalled()
+  })
+
+  const clear = container.querySelector('.nut-searchbar-clear') as Element
+  fireEvent.click(clear)
+  await waitFor(() => {
+    expect(inputEl).toHaveValue('')
+  })
 })
diff --git a/src/packages/searchbar/searchbar.tsx b/src/packages/searchbar/searchbar.tsx
index 8f9a54110a..92a4180695 100644
--- a/src/packages/searchbar/searchbar.tsx
+++ b/src/packages/searchbar/searchbar.tsx
@@ -176,7 +176,8 @@ export const SearchBar: FunctionComponent<
     return (
       <div
         className={`${classPrefix}-clear ${classPrefix}-icon`}
-        onClick={(e) => clearaVal(e)}
+        onClick={clearaVal}
+        aria-label="清除"
       >
         <MaskClose />
       </div>

From 94d1c431394e13fb9bdf008e9835b095d65c49ea Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Tue, 29 Apr 2025 20:42:50 +0800
Subject: [PATCH 07/14] fix: demos

---
 src/packages/searchbar/demos/h5/demo10.tsx   | 2 +-
 src/packages/searchbar/demos/taro/demo10.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/packages/searchbar/demos/h5/demo10.tsx b/src/packages/searchbar/demos/h5/demo10.tsx
index 9657d936fd..cd4772c969 100644
--- a/src/packages/searchbar/demos/h5/demo10.tsx
+++ b/src/packages/searchbar/demos/h5/demo10.tsx
@@ -26,7 +26,7 @@ const Demo = () => {
         onFocus={() => {
           console.log('focus dvalue', dvalue)
           if (dvalue) {
-            setValue1(dvalue)
+            setValue1(dvalue.split(',').join(''))
             setDvalue('')
           }
         }}
diff --git a/src/packages/searchbar/demos/taro/demo10.tsx b/src/packages/searchbar/demos/taro/demo10.tsx
index 522dc35463..e7975c438c 100644
--- a/src/packages/searchbar/demos/taro/demo10.tsx
+++ b/src/packages/searchbar/demos/taro/demo10.tsx
@@ -26,7 +26,7 @@ const Demo = () => {
         onFocus={() => {
           console.log('focus dvalue', dvalue)
           if (dvalue) {
-            setValue1(dvalue)
+            setValue1(dvalue.split(',').join(''))
             setDvalue('')
           }
         }}

From 77ba15b61946e5e30b5d29efe939cb3f1bcd3637 Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Tue, 29 Apr 2025 20:57:39 +0800
Subject: [PATCH 08/14] =?UTF-8?q?fix:=20=E5=88=A0=E9=99=A4=E6=97=A0?=
 =?UTF-8?q?=E7=94=A8=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/searchbar/searchbar.taro.tsx | 6 +-----
 src/packages/searchbar/searchbar.tsx      | 6 +-----
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/packages/searchbar/searchbar.taro.tsx b/src/packages/searchbar/searchbar.taro.tsx
index 2d5484ab02..1ef3959aef 100644
--- a/src/packages/searchbar/searchbar.taro.tsx
+++ b/src/packages/searchbar/searchbar.taro.tsx
@@ -75,10 +75,6 @@ export const SearchBar: FunctionComponent<
     finalValue: '',
   })
 
-  useEffect(() => {
-    setValue(defaultValue)
-  }, [defaultValue])
-
   const forceFocus = () => {
     const searchSelf: HTMLInputElement | null = searchInputRef.current
     searchSelf && searchSelf.focus()
@@ -137,7 +133,7 @@ export const SearchBar: FunctionComponent<
           <View
             key={`def-${index}`}
             className="nut-searchbar-value"
-            onClick={() => onItemClick(item)}
+            onClick={() => onItemClick?.(item)}
           >
             {item}
             <Close />
diff --git a/src/packages/searchbar/searchbar.tsx b/src/packages/searchbar/searchbar.tsx
index 92a4180695..a5441d9d9e 100644
--- a/src/packages/searchbar/searchbar.tsx
+++ b/src/packages/searchbar/searchbar.tsx
@@ -68,10 +68,6 @@ export const SearchBar: FunctionComponent<
     finalValue: '',
   })
 
-  useEffect(() => {
-    setValue(defaultValue)
-  }, [defaultValue])
-
   const forceFocus = () => {
     const searchSelf: HTMLInputElement | null = searchInputRef.current
     searchSelf && searchSelf.focus()
@@ -125,7 +121,7 @@ export const SearchBar: FunctionComponent<
           <div
             key={`def-${index}`}
             className="nut-searchbar-value"
-            onClick={() => onItemClick(item)}
+            onClick={() => onItemClick?.(item)}
           >
             {item}
             <Close />

From 0bb4b4c257cdbfc09d226cf6bdcc0e1de9140a37 Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Thu, 1 May 2025 17:30:04 +0800
Subject: [PATCH 09/14] feat: tags

---
 scripts/harmony/update-taro-entry.js         |  10 +-
 src/packages/searchbar/demos/h5/demo10.tsx   |  32 ++--
 src/packages/searchbar/demos/taro/demo1.tsx  |   4 +-
 src/packages/searchbar/demos/taro/demo10.tsx |  40 ++---
 src/packages/searchbar/demos/taro/demo5.tsx  |   8 +-
 src/packages/searchbar/searchbar.scss        |   2 +
 src/packages/searchbar/searchbar.taro.tsx    | 175 +++++++++++-------
 src/packages/searchbar/searchbar.tsx         | 176 ++++++++++++-------
 src/types/spec/searchbar/base.ts             |   3 +-
 9 files changed, 270 insertions(+), 180 deletions(-)

diff --git a/scripts/harmony/update-taro-entry.js b/scripts/harmony/update-taro-entry.js
index f46c0b1c74..88a92e77aa 100644
--- a/scripts/harmony/update-taro-entry.js
+++ b/scripts/harmony/update-taro-entry.js
@@ -21,7 +21,7 @@ const isShow = (item) => {
 
 // 更新 app.config.ts 文件
 const createConfig = async () => {
-  const configRef = []
+  let configRef = []
 
   return new Promise((res, rej) => {
     config.nav.map((item) => {
@@ -29,8 +29,8 @@ const createConfig = async () => {
         root: item.enName,
         pages: [],
       }
-      if(paramG) {
-        if(paramG === item.enName){
+      if (paramG) {
+        if (paramG === item.enName) {
           item.packages.map((it) => {
             if (isShow(it)) {
               co.pages.push(`pages/${it.name.toLowerCase()}/index`)
@@ -49,6 +49,10 @@ const createConfig = async () => {
       co = { ...co, pages: co.pages.sort() }
       configRef.push(co)
     })
+
+    // 如果 pages 数据为空，则删除该项
+    configRef = configRef.filter((item) => item.pages.length !== 0)
+
     res(configRef)
   })
 }
diff --git a/src/packages/searchbar/demos/h5/demo10.tsx b/src/packages/searchbar/demos/h5/demo10.tsx
index cd4772c969..33cd5cbbd6 100644
--- a/src/packages/searchbar/demos/h5/demo10.tsx
+++ b/src/packages/searchbar/demos/h5/demo10.tsx
@@ -3,34 +3,28 @@ import { SearchBar, Button } from '@nutui/nutui-react'
 import { Photograph, Category } from '@nutui/icons-react'
 
 const Demo = () => {
-  const [dvalue, setDvalue] = useState('西红柿,铁皮')
-  const [value, setValue] = useState('西红柿')
-  const [value1, setValue1] = useState('')
+  const [value, setValue] = useState('醋溜土豆丝')
+  const [value1, setValue1] = useState('西红柿,铁皮')
   return (
     <>
       <SearchBar
         backable
         leftIn={null}
-        defaultValue={dvalue}
         value={value1}
-        onItemClick={(value: string) => {
-          console.log('click', value)
-          if (dvalue) {
-            const arr = dvalue.split(',')
-            const newArr = arr.filter((item: string) => item !== value)
-            const newVal = newArr.length > 1 ? newArr.join(',') : newArr[0]
-            setValue1(newVal)
-            setDvalue(newVal)
-          }
+        tag
+        onItemClick={(val: string) => {
+          console.log('click', val)
+          const arr = value1.split(',')
+          const newArr = arr.filter((item: string) => item !== val)
+          const newVal = newArr.length > 1 ? newArr.join(',') : newArr.join('')
+          setValue1(newVal)
         }}
-        onFocus={() => {
-          console.log('focus dvalue', dvalue)
-          if (dvalue) {
-            setValue1(dvalue.split(',').join(''))
-            setDvalue('')
-          }
+        onFocus={(val: string) => {
+          console.log('focus value', val)
+          setValue1(val.split(',').join(''))
         }}
         onChange={(val) => {
+          console.log('onChange', val)
           setValue1(val)
         }}
         rightIn={
diff --git a/src/packages/searchbar/demos/taro/demo1.tsx b/src/packages/searchbar/demos/taro/demo1.tsx
index 2bdd1c1753..c133adba89 100644
--- a/src/packages/searchbar/demos/taro/demo1.tsx
+++ b/src/packages/searchbar/demos/taro/demo1.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { SearchBar, Divider } from '@nutui/nutui-react-taro'
 import { Photograph, Scan } from '@nutui/icons-react-taro'
 
-const Demo1 = () => {
+const Demo = () => {
   return (
     <>
       <SearchBar placeholder="麻辣烫" rightIn="搜索" />
@@ -20,4 +20,4 @@ const Demo1 = () => {
     </>
   )
 }
-export default Demo1
+export default Demo
diff --git a/src/packages/searchbar/demos/taro/demo10.tsx b/src/packages/searchbar/demos/taro/demo10.tsx
index e7975c438c..e68915ffcc 100644
--- a/src/packages/searchbar/demos/taro/demo10.tsx
+++ b/src/packages/searchbar/demos/taro/demo10.tsx
@@ -1,36 +1,30 @@
 import React, { useState } from 'react'
-import { SearchBar, Button } from '@nutui/nutui-react-taro'
+import { SearchBar } from '@nutui/nutui-react-taro'
 import { Photograph, Category } from '@nutui/icons-react-taro'
 
 const Demo = () => {
-  const [dvalue, setDvalue] = useState('西红柿,铁皮')
-  const [value, setValue] = useState('西红柿')
-  const [value1, setValue1] = useState('')
+  const [value, setValue] = useState('醋溜土豆丝')
+  const [value1, setValue1] = useState('西红柿,铁皮')
   return (
     <>
       <SearchBar
         backable
         leftIn={null}
-        defaultValue={dvalue}
         value={value1}
-        onItemClick={(value: string) => {
-          console.log('click', value)
-          if (dvalue) {
-            const arr = dvalue.split(',')
-            const newArr = arr.filter((item: string) => item !== value)
-            const newVal = newArr.length > 1 ? newArr.join(',') : newArr[0]
-            setValue1(newVal)
-            setDvalue(newVal)
-          }
+        tag
+        onItemClick={(val: string) => {
+          console.log('click', val)
+          const arr = value1.split(',')
+          const newArr = arr.filter((item: string) => item !== val)
+          const newVal = newArr.length > 1 ? newArr.join(',') : newArr.join('')
+          setValue1(newVal)
         }}
-        onFocus={() => {
-          console.log('focus dvalue', dvalue)
-          if (dvalue) {
-            setValue1(dvalue.split(',').join(''))
-            setDvalue('')
-          }
+        onFocus={(val: string) => {
+          console.log('focus value', val)
+          setValue1(val.split(',').join(''))
         }}
         onChange={(val) => {
+          console.log('onChange', val)
           setValue1(val)
         }}
         rightIn={
@@ -40,14 +34,14 @@ const Demo = () => {
         }
         right={<Category />}
       />
-      <SearchBar
+      {/* <SearchBar
         backable
         leftIn={null}
         value={value}
         onChange={(val) => {
           setValue(val)
         }}
-        autoFocus
+        // autoFocus
         rightIn={
           <div style={{ display: 'flex', alignItems: 'center' }}>
             <Photograph color="#505259" style={{ marginRight: '12px' }} />
@@ -56,7 +50,7 @@ const Demo = () => {
             </Button>
           </div>
         }
-      />
+      /> */}
     </>
   )
 }
diff --git a/src/packages/searchbar/demos/taro/demo5.tsx b/src/packages/searchbar/demos/taro/demo5.tsx
index a3e10a597f..b58c0507bd 100644
--- a/src/packages/searchbar/demos/taro/demo5.tsx
+++ b/src/packages/searchbar/demos/taro/demo5.tsx
@@ -14,24 +14,22 @@ const Demo5 = () => {
       <SearchBar
         left={
           <>
-            <ArrowLeft size={20} />
-            <Close size={20} />
+            <ArrowLeft />
+            <Close />
           </>
         }
         right={
           <>
             <Star
-              size={20}
               style={{
                 color: 'var(--nutui-color-primary)',
               }}
             />
-            <More size={20} />
+            <More />
           </>
         }
         rightIn={
           <Photograph
-            size={16}
             onClick={() => {
               console.log('Photograph right in')
             }}
diff --git a/src/packages/searchbar/searchbar.scss b/src/packages/searchbar/searchbar.scss
index e00a074dba..eb5c68211f 100644
--- a/src/packages/searchbar/searchbar.scss
+++ b/src/packages/searchbar/searchbar.scss
@@ -71,6 +71,8 @@
   }
 
   &-clear {
+    width: 20px;
+    height: 20px;
     &.nut-searchbar-icon {
       .nut-icon {
         width: 12px;
diff --git a/src/packages/searchbar/searchbar.taro.tsx b/src/packages/searchbar/searchbar.taro.tsx
index 1ef3959aef..a8cd2c262f 100644
--- a/src/packages/searchbar/searchbar.taro.tsx
+++ b/src/packages/searchbar/searchbar.taro.tsx
@@ -1,5 +1,11 @@
-import Taro from '@tarojs/taro'
-import React, { FunctionComponent, useEffect, useRef } from 'react'
+import React, {
+  FunctionComponent,
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+  useMemo,
+} from 'react'
 import {
   Input as TaroInput,
   ITouchEvent,
@@ -28,6 +34,7 @@ const defaultProps = {
   right: '',
   rightIn: '',
   leftIn: <Search />,
+  tag: false,
 } as TaroSearchBarProps
 export const SearchBar: FunctionComponent<
   Partial<TaroSearchBarProps> &
@@ -57,6 +64,7 @@ export const SearchBar: FunctionComponent<
     left,
     leftIn,
     rightIn,
+    tag,
     onChange,
     onFocus,
     onBlur,
@@ -75,47 +83,89 @@ export const SearchBar: FunctionComponent<
     finalValue: '',
   })
 
-  const forceFocus = () => {
-    const searchSelf: HTMLInputElement | null = searchInputRef.current
-    searchSelf && searchSelf.focus()
-  }
-  const onInput = (event: BaseEventOrig<InputProps.inputEventDetail>) => {
-    const eventValue = event?.detail?.value
-    if (value === eventValue) return
-    onChange && onChange(eventValue, event)
-    setValue(eventValue)
-    eventValue === '' && forceFocus()
-  }
-  const handleFocus = (
-    event: BaseEventOrig<InputProps.inputForceEventDetail>
-  ) => {
-    onFocus && onFocus(event?.detail?.value, event)
-  }
+  const [innerTag, setInnerTag] = useState(tag)
+
+  const forceFocus = useCallback(() => {
+    searchInputRef.current?.focus()
+  }, [])
+
+  const onInput = useCallback(
+    (event: BaseEventOrig<InputProps.inputEventDetail>) => {
+      const eventValue = event.detail?.value
+      if (value === eventValue) return
+      onChange && onChange(eventValue, event)
+      setValue(eventValue)
+      eventValue === '' && forceFocus()
+    },
+    [onChange, setValue, forceFocus, value]
+  )
+
+  const handleFocus = useCallback(
+    (event: BaseEventOrig<InputProps.inputForceEventDetail>) => {
+      onFocus && onFocus(event.detail?.value, event)
+      setInnerTag(false)
+    },
+    [onFocus]
+  )
+
   const handleBlur = (
     event: BaseEventOrig<InputProps.inputValueEventDetail>
   ) => {
-    const searchSelf: HTMLInputElement | null = searchInputRef.current
-    searchSelf && searchSelf.blur()
-    onBlur && onBlur(event?.detail?.value, event)
+    searchInputRef.current?.blur()
+    onBlur && onBlur(event.detail?.value, event)
+    setTimeout(() => {
+      value && setInnerTag(tag)
+    }, 100)
   }
 
+  const clearaVal = useCallback(
+    (event: ITouchEvent) => {
+      if (disabled || readOnly) return
+      setValue('')
+      onChange && onChange('')
+      onClear && onClear(event)
+      forceFocus()
+    },
+    [disabled, readOnly, onChange, onClear, setValue]
+  )
+
+  const cls = useMemo(
+    () =>
+      classNames(
+        classPrefix,
+        {
+          [`${classPrefix}-disabled`]: disabled,
+          [`${classPrefix}-focus`]: left || backable,
+        },
+        className
+      ),
+    [disabled, backable, left, className]
+  )
+
   useEffect(() => {
-    if (Taro.getEnv() === 'WEB') {
-      autoFocus && forceFocus()
+    if (autoFocus) {
+      forceFocus()
+    }
+    if (tag && !innerTag) {
+      forceFocus()
     }
-  }, [autoFocus])
+  }, [autoFocus, forceFocus, innerTag])
+
   const renderField = () => {
     const inputCls = classNames(`${classPrefix}-input`)
     return (
       <TaroInput
         className={inputCls}
         ref={searchInputRef}
-        style={style}
-        value={(value || '').toString()}
+        style={{
+          ...style,
+          ...{ color: `${innerTag ? 'transparent' : '#333'}` },
+        }}
+        value={value}
         placeholder={placeholder || locale.placeholder}
         disabled={disabled || readOnly}
         maxlength={maxLength}
-        autoFocus={autoFocus}
+        focus={autoFocus}
         onInput={onInput}
         onFocus={handleFocus}
         onBlur={handleBlur}
@@ -125,10 +175,18 @@ export const SearchBar: FunctionComponent<
     )
   }
 
-  const renderDefaultValue = () => {
-    const list = defaultValue.split(',')
+  const renderValueByTags = useCallback(() => {
+    if (!innerTag) return null
+    if (!value) {
+      setTimeout(() => {
+        forceFocus()
+      }, 0)
+      return null
+    }
+    const list = value.split(',')
+    if (!list) return null
     return (
-      <View className="nut-searchbar-values">
+      <View className={`nut-searchbar-values `}>
         {list.map((item, index) => (
           <View
             key={`def-${index}`}
@@ -141,24 +199,27 @@ export const SearchBar: FunctionComponent<
         ))}
       </View>
     )
-  }
-  const renderLeftIn = () => {
+  }, [value, onItemClick, innerTag])
+
+  const renderLeftIn = useCallback(() => {
     if (!leftIn) return null
     return (
       <View className={`${classPrefix}-leftin ${classPrefix}-icon`}>
         {leftIn}
       </View>
     )
-  }
-  const renderLeft = () => {
+  }, [leftIn])
+
+  const renderLeft = useCallback(() => {
     if (!backable && !left) return null
     return (
       <View className={`${classPrefix}-left`}>
         {backable ? <ArrowLeft /> : left}
       </View>
     )
-  }
-  const renderRightIn = () => {
+  }, [backable, left])
+
+  const renderRightIn = useCallback(() => {
     if (!rightIn) return null
     return (
       <>
@@ -171,40 +232,32 @@ export const SearchBar: FunctionComponent<
         )}
       </>
     )
-  }
-  const renderRight = () => {
+  }, [rightIn])
+
+  const renderRight = useCallback(() => {
     if (!right) return null
     return <View className={`${classPrefix}-right`}>{right}</View>
-  }
-  const renderClear = () => {
+  }, [right])
+
+  const renderClear = useCallback(() => {
     return (
       <View
         className={`${classPrefix}-clear ${classPrefix}-icon`}
-        onClick={(e: any) => clearaVal(e)}
+        style={{
+          visibility: `${!innerTag && value && clearable ? 'visible' : 'hidden'}`,
+        }}
+        onClick={clearaVal}
+        aria-label="清除"
       >
         <MaskClose />
       </View>
     )
-  }
-  const clearaVal = (event: ITouchEvent) => {
-    if (disabled || readOnly) return
-    setValue('')
-    forceFocus()
-    onChange && onChange('')
-    onClear && onClear(event)
-  }
+  }, [value, clearable, clearaVal, innerTag])
+
   const onConfirm = () => {
     onSearch && onSearch(value as string)
   }
 
-  const cls = classNames(
-    classPrefix,
-    {
-      [`${classPrefix}-disabled`]: disabled,
-      [`${classPrefix}-focus`]: left || backable,
-    },
-    className
-  )
   return (
     <View className={cls} style={style}>
       {renderLeft()}
@@ -214,11 +267,9 @@ export const SearchBar: FunctionComponent<
         })}
       >
         {renderLeftIn()}
-        <View className="nut-searchbar-input-box">
-          {renderField()}
-          {defaultValue && renderDefaultValue()}
-        </View>
-        {!defaultValue && clearable && value && renderClear()}
+        <View className="nut-searchbar-input-box">{renderField()}</View>
+        {renderValueByTags()}
+        {renderClear()}
         {renderRightIn()}
       </View>
       {renderRight()}
diff --git a/src/packages/searchbar/searchbar.tsx b/src/packages/searchbar/searchbar.tsx
index a5441d9d9e..b6c460fe12 100644
--- a/src/packages/searchbar/searchbar.tsx
+++ b/src/packages/searchbar/searchbar.tsx
@@ -1,5 +1,12 @@
 import type { ChangeEvent, FocusEvent, MouseEvent } from 'react'
-import React, { FunctionComponent, useEffect, useRef } from 'react'
+import React, {
+  FunctionComponent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  useMemo,
+} from 'react'
 import { ArrowLeft, Close, MaskClose, Search } from '@nutui/icons-react'
 import classNames from 'classnames'
 import { useConfig } from '@/packages/configprovider'
@@ -21,6 +28,7 @@ const defaultProps = {
   right: '',
   rightIn: '',
   leftIn: <Search />,
+  tag: false,
 } as WebSearchBarProps
 export const SearchBar: FunctionComponent<
   Partial<WebSearchBarProps> &
@@ -30,7 +38,6 @@ export const SearchBar: FunctionComponent<
     >
 > = (props) => {
   const classPrefix = 'nut-searchbar'
-
   const { locale } = useConfig()
   const searchInputRef = useRef<HTMLInputElement>(null)
   const {
@@ -50,6 +57,7 @@ export const SearchBar: FunctionComponent<
     left,
     leftIn,
     rightIn,
+    tag,
     onChange,
     onFocus,
     onBlur,
@@ -68,30 +76,87 @@ export const SearchBar: FunctionComponent<
     finalValue: '',
   })
 
-  const forceFocus = () => {
-    const searchSelf: HTMLInputElement | null = searchInputRef.current
-    searchSelf && searchSelf.focus()
-  }
+  const [innerTag, setInnerTag] = useState(tag)
 
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const { value } = event.target
-    onChange && onChange(value, event)
-    setValue(value)
-  }
+  const forceFocus = useCallback(() => {
+    searchInputRef.current?.focus()
+  }, [])
 
-  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
-    onFocus && onFocus(event?.target?.value, event)
-  }
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const { value } = event.target
+      onChange && onChange(value, event)
+      setValue(value)
+    },
+    [onChange, setValue]
+  )
 
-  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
-    const searchSelf: HTMLInputElement | null = searchInputRef.current
-    searchSelf && searchSelf.blur()
-    onBlur && onBlur(event?.target?.value, event)
-  }
+  const handleInput = useCallback(
+    (event: MouseEvent<HTMLInputElement>) => {
+      onInputClick?.(event)
+    },
+    [onInputClick]
+  )
+
+  const handleFocus = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
+      onFocus && onFocus(event.target?.value, event)
+      setInnerTag(false)
+    },
+    [onFocus]
+  )
+
+  const handleBlur = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
+      searchInputRef.current?.blur()
+      onBlur && onBlur(event.target?.value, event)
+      setTimeout(() => {
+        setInnerTag(tag)
+      }, 150)
+    },
+    [onBlur, tag]
+  )
+  const clearaVal = useCallback(
+    (event: MouseEvent<HTMLDivElement>) => {
+      if (disabled || readOnly) return
+      setValue('')
+      forceFocus()
+      onChange && onChange('')
+      onClear && onClear(event)
+    },
+    [disabled, readOnly, onChange, onClear, setValue]
+  )
+
+  const onKeydown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        const event = e.nativeEvent
+        if (typeof event.cancelable !== 'boolean' || event.cancelable) {
+          event.preventDefault()
+        }
+        onSearch && onSearch(value as string)
+      }
+    },
+    [onSearch, value]
+  )
 
+  const cls = useMemo(
+    () =>
+      classNames(
+        classPrefix,
+        {
+          [`${classPrefix}-disabled`]: disabled,
+          [`${classPrefix}-focus`]: left || backable,
+        },
+        className
+      ),
+    [disabled, backable, left, className]
+  )
   useEffect(() => {
-    autoFocus && forceFocus()
-  }, [autoFocus])
+    if (autoFocus) {
+      forceFocus()
+    }
+  }, [autoFocus, forceFocus, value])
 
   const renderField = () => {
     const inputCls = classNames(`${classPrefix}-input`)
@@ -108,20 +173,27 @@ export const SearchBar: FunctionComponent<
         onChange={handleChange}
         onFocus={handleFocus}
         onBlur={handleBlur}
-        onClick={onInputClick}
+        onClick={handleInput}
       />
     )
   }
 
-  const renderDefaultValue = () => {
-    const list = defaultValue.split(',')
+  const renderValueByTags = useCallback(() => {
+    if (!value) {
+      setTimeout(() => {
+        forceFocus()
+      }, 0)
+      return null
+    }
+    const list = value.split(',')
+    if (!list) return null
     return (
       <div className="nut-searchbar-values">
         {list.map((item, index) => (
           <div
             key={`def-${index}`}
             className="nut-searchbar-value"
-            onClick={() => onItemClick?.(item)}
+            onClick={(e) => onItemClick?.(item, e)}
           >
             {item}
             <Close />
@@ -129,26 +201,27 @@ export const SearchBar: FunctionComponent<
         ))}
       </div>
     )
-  }
+  }, [value, onItemClick])
 
-  const renderLeftIn = () => {
+  const renderLeftIn = useCallback(() => {
     if (!leftIn) return null
     return (
       <div className={`${classPrefix}-leftin ${classPrefix}-icon`}>
         {leftIn}
       </div>
     )
-  }
-  const renderLeft = () => {
+  }, [leftIn])
+
+  const renderLeft = useCallback(() => {
     if (!backable && !left) return null
     return (
       <div className={`${classPrefix}-left`}>
         {backable ? <ArrowLeft /> : left}
       </div>
     )
-  }
+  }, [backable, left])
 
-  const renderRightIn = () => {
+  const renderRightIn = useCallback(() => {
     if (!rightIn) return null
     return (
       <>
@@ -161,14 +234,15 @@ export const SearchBar: FunctionComponent<
         )}
       </>
     )
-  }
+  }, [rightIn])
 
-  const renderRight = () => {
+  const renderRight = useCallback(() => {
     if (!right) return null
     return <div className={`${classPrefix}-right`}>{right}</div>
-  }
+  }, [right])
 
-  const renderClear = () => {
+  const renderClear = useCallback(() => {
+    if (!value || !clearable) return null
     return (
       <div
         className={`${classPrefix}-clear ${classPrefix}-icon`}
@@ -178,34 +252,7 @@ export const SearchBar: FunctionComponent<
         <MaskClose />
       </div>
     )
-  }
-
-  const clearaVal = (event: MouseEvent<HTMLDivElement>) => {
-    if (disabled || readOnly) return
-    setValue('')
-    onChange && onChange('')
-    onClear && onClear(event)
-    forceFocus()
-  }
-
-  const onKeydown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      const event = e.nativeEvent
-      if (typeof event.cancelable !== 'boolean' || event.cancelable) {
-        event.preventDefault()
-      }
-      onSearch && onSearch(value as string)
-    }
-  }
-
-  const cls = classNames(
-    classPrefix,
-    {
-      [`${classPrefix}-disabled`]: disabled,
-      [`${classPrefix}-focus`]: left || backable,
-    },
-    className
-  )
+  }, [value, clearable, clearaVal])
 
   return (
     <div className={cls} style={style}>
@@ -217,8 +264,7 @@ export const SearchBar: FunctionComponent<
       >
         {renderLeftIn()}
         {renderField()}
-        {defaultValue && renderDefaultValue()}
-        {!defaultValue && clearable && value && renderClear()}
+        {innerTag ? renderValueByTags() : renderClear()}
         {renderRightIn()}
       </div>
       {renderRight()}
diff --git a/src/types/spec/searchbar/base.ts b/src/types/spec/searchbar/base.ts
index f2190bfa48..f39550ab73 100644
--- a/src/types/spec/searchbar/base.ts
+++ b/src/types/spec/searchbar/base.ts
@@ -17,11 +17,12 @@ export interface BaseSearchBar extends BaseProps {
   right: ReactNode
   leftIn: ReactNode
   rightIn: ReactNode
+  tag: boolean
   onSearch: (val: string) => void
   onChange: (value: string, e: any) => void
   onFocus: (value: string, e: any) => void
   onBlur: (value: string, e: any) => void
   onClear: (e: any) => void
   onInputClick: (e: any) => void
-  onItemClick: (value: string) => void
+  onItemClick: (value: string, e: any) => void
 }

From e78d326e4cb0648f73ba9277f9c7527e66df6a05 Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Thu, 1 May 2025 18:09:18 +0800
Subject: [PATCH 10/14] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dtag=E8=AE=BE?=
 =?UTF-8?q?=E5=AE=9A=E5=BC=82=E5=B8=B8=E7=9A=84=E6=83=85=E5=86=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/searchbar/searchbar.taro.tsx | 28 +++++++++++------------
 src/packages/searchbar/searchbar.tsx      |  8 +++----
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/packages/searchbar/searchbar.taro.tsx b/src/packages/searchbar/searchbar.taro.tsx
index a8cd2c262f..3b2a4d1ae4 100644
--- a/src/packages/searchbar/searchbar.taro.tsx
+++ b/src/packages/searchbar/searchbar.taro.tsx
@@ -1,9 +1,9 @@
 import React, {
   FunctionComponent,
+  useCallback,
   useEffect,
   useRef,
   useState,
-  useCallback,
   useMemo,
 } from 'react'
 import {
@@ -44,7 +44,6 @@ export const SearchBar: FunctionComponent<
     >
 > = (props) => {
   const classPrefix = 'nut-searchbar'
-
   const { locale } = useConfig()
   const searchInputRef = useRef<HTMLInputElement>(null)
   const {
@@ -89,7 +88,7 @@ export const SearchBar: FunctionComponent<
     searchInputRef.current?.focus()
   }, [])
 
-  const onInput = useCallback(
+  const handleInput = useCallback(
     (event: BaseEventOrig<InputProps.inputEventDetail>) => {
       const eventValue = event.detail?.value
       if (value === eventValue) return
@@ -108,15 +107,16 @@ export const SearchBar: FunctionComponent<
     [onFocus]
   )
 
-  const handleBlur = (
-    event: BaseEventOrig<InputProps.inputValueEventDetail>
-  ) => {
-    searchInputRef.current?.blur()
-    onBlur && onBlur(event.detail?.value, event)
-    setTimeout(() => {
-      value && setInnerTag(tag)
-    }, 100)
-  }
+  const handleBlur = useCallback(
+    (event: BaseEventOrig<InputProps.inputValueEventDetail>) => {
+      searchInputRef.current?.blur()
+      onBlur && onBlur(event.detail?.value, event)
+      setTimeout(() => {
+        setInnerTag(tag)
+      }, 100)
+    },
+    [onBlur, tag, value]
+  )
 
   const clearaVal = useCallback(
     (event: ITouchEvent) => {
@@ -166,7 +166,7 @@ export const SearchBar: FunctionComponent<
         disabled={disabled || readOnly}
         maxlength={maxLength}
         focus={autoFocus}
-        onInput={onInput}
+        onInput={handleInput}
         onFocus={handleFocus}
         onBlur={handleBlur}
         onClick={onInputClick}
@@ -191,7 +191,7 @@ export const SearchBar: FunctionComponent<
           <View
             key={`def-${index}`}
             className="nut-searchbar-value"
-            onClick={() => onItemClick?.(item)}
+            onClick={(e) => onItemClick?.(item, e)}
           >
             {item}
             <Close />
diff --git a/src/packages/searchbar/searchbar.tsx b/src/packages/searchbar/searchbar.tsx
index b6c460fe12..b6817a3fb7 100644
--- a/src/packages/searchbar/searchbar.tsx
+++ b/src/packages/searchbar/searchbar.tsx
@@ -91,7 +91,7 @@ export const SearchBar: FunctionComponent<
     [onChange, setValue]
   )
 
-  const handleInput = useCallback(
+  const handleInputClick = useCallback(
     (event: MouseEvent<HTMLInputElement>) => {
       onInputClick?.(event)
     },
@@ -111,10 +111,10 @@ export const SearchBar: FunctionComponent<
       searchInputRef.current?.blur()
       onBlur && onBlur(event.target?.value, event)
       setTimeout(() => {
-        setInnerTag(tag)
+        setInnerTag(event.target?.value ? tag : false)
       }, 150)
     },
-    [onBlur, tag]
+    [onBlur, tag, value]
   )
   const clearaVal = useCallback(
     (event: MouseEvent<HTMLDivElement>) => {
@@ -173,7 +173,7 @@ export const SearchBar: FunctionComponent<
         onChange={handleChange}
         onFocus={handleFocus}
         onBlur={handleBlur}
-        onClick={handleInput}
+        onClick={handleInputClick}
       />
     )
   }

From e86b8837981c0ed4a4055019495f800ea37b3def Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Thu, 1 May 2025 23:27:24 +0800
Subject: [PATCH 11/14] =?UTF-8?q?fix:=20=E5=85=BC=E5=AE=B9taro=20h5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/searchbar/searchbar.taro.tsx | 72 ++++++++++++++++-------
 src/packages/searchbar/searchbar.tsx      |  2 +-
 2 files changed, 51 insertions(+), 23 deletions(-)

diff --git a/src/packages/searchbar/searchbar.taro.tsx b/src/packages/searchbar/searchbar.taro.tsx
index 3b2a4d1ae4..0e2d9835a0 100644
--- a/src/packages/searchbar/searchbar.taro.tsx
+++ b/src/packages/searchbar/searchbar.taro.tsx
@@ -1,3 +1,4 @@
+import Taro from '@tarojs/taro'
 import React, {
   FunctionComponent,
   useCallback,
@@ -112,8 +113,12 @@ export const SearchBar: FunctionComponent<
       searchInputRef.current?.blur()
       onBlur && onBlur(event.detail?.value, event)
       setTimeout(() => {
-        setInnerTag(tag)
-      }, 100)
+        if (Taro.getEnv() === 'WEB') {
+          setInnerTag(event.target?.value ? tag : false)
+        } else {
+          setInnerTag(tag)
+        }
+      }, 200)
     },
     [onBlur, tag, value]
   )
@@ -122,9 +127,9 @@ export const SearchBar: FunctionComponent<
     (event: ITouchEvent) => {
       if (disabled || readOnly) return
       setValue('')
+      forceFocus()
       onChange && onChange('')
       onClear && onClear(event)
-      forceFocus()
     },
     [disabled, readOnly, onChange, onClear, setValue]
   )
@@ -154,24 +159,47 @@ export const SearchBar: FunctionComponent<
   const renderField = () => {
     const inputCls = classNames(`${classPrefix}-input`)
     return (
-      <TaroInput
-        className={inputCls}
-        ref={searchInputRef}
-        style={{
-          ...style,
-          ...{ color: `${innerTag ? 'transparent' : '#333'}` },
-        }}
-        value={value}
-        placeholder={placeholder || locale.placeholder}
-        disabled={disabled || readOnly}
-        maxlength={maxLength}
-        focus={autoFocus}
-        onInput={handleInput}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        onClick={onInputClick}
-        onConfirm={onConfirm}
-      />
+      <>
+        {Taro.getEnv() === 'WEB' ? (
+          <TaroInput
+            className={inputCls}
+            ref={searchInputRef}
+            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}
+          />
+        ) : (
+          <TaroInput
+            className={inputCls}
+            ref={searchInputRef}
+            style={{
+              ...style,
+              ...{ color: `${innerTag ? 'transparent' : '#333'}` },
+            }}
+            value={value}
+            placeholder={placeholder || locale.placeholder}
+            disabled={disabled || readOnly}
+            maxlength={maxLength}
+            focus={autoFocus}
+            onInput={handleInput}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            onClick={onInputClick}
+            onConfirm={onConfirm}
+          />
+        )}
+      </>
     )
   }
 
@@ -186,7 +214,7 @@ export const SearchBar: FunctionComponent<
     const list = value.split(',')
     if (!list) return null
     return (
-      <View className={`nut-searchbar-values `}>
+      <View className="nut-searchbar-values">
         {list.map((item, index) => (
           <View
             key={`def-${index}`}
diff --git a/src/packages/searchbar/searchbar.tsx b/src/packages/searchbar/searchbar.tsx
index b6817a3fb7..8e417e8acf 100644
--- a/src/packages/searchbar/searchbar.tsx
+++ b/src/packages/searchbar/searchbar.tsx
@@ -156,7 +156,7 @@ export const SearchBar: FunctionComponent<
     if (autoFocus) {
       forceFocus()
     }
-  }, [autoFocus, forceFocus, value])
+  }, [autoFocus, forceFocus])
 
   const renderField = () => {
     const inputCls = classNames(`${classPrefix}-input`)

From cd5dbabde908f47ce7f7da46b47b2a73947a1f85 Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Thu, 1 May 2025 23:34:34 +0800
Subject: [PATCH 12/14] fix: type

---
 src/packages/searchbar/searchbar.taro.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/packages/searchbar/searchbar.taro.tsx b/src/packages/searchbar/searchbar.taro.tsx
index 0e2d9835a0..4beb2afe63 100644
--- a/src/packages/searchbar/searchbar.taro.tsx
+++ b/src/packages/searchbar/searchbar.taro.tsx
@@ -109,7 +109,7 @@ export const SearchBar: FunctionComponent<
   )
 
   const handleBlur = useCallback(
-    (event: BaseEventOrig<InputProps.inputValueEventDetail>) => {
+    (event: BaseEventOrig<InputProps.inputValueEventDetail> | any) => {
       searchInputRef.current?.blur()
       onBlur && onBlur(event.detail?.value, event)
       setTimeout(() => {

From 08dd01eff8a09ad879645499cde39a2c1cfc97ce Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Thu, 1 May 2025 23:41:28 +0800
Subject: [PATCH 13/14] test: fixed

---
 src/packages/searchbar/__tests__/searchbar.spec.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/packages/searchbar/__tests__/searchbar.spec.tsx b/src/packages/searchbar/__tests__/searchbar.spec.tsx
index 82373544ea..49363ef7fc 100644
--- a/src/packages/searchbar/__tests__/searchbar.spec.tsx
+++ b/src/packages/searchbar/__tests__/searchbar.spec.tsx
@@ -26,12 +26,6 @@ test('should display left and right text', () => {
   )
 })
 
-test('should render with default value', () => {
-  const { container } = render(<SearchBar defaultValue="123" />)
-  const dvalues = container.querySelectorAll('.nut-searchbar-value')
-  expect(dvalues.length).toBe(1)
-})
-
 test('should render right-in element', () => {
   const { container, rerender } = render(<SearchBar rightIn="搜索" />)
   const rightin = container.querySelectorAll('.nut-searchbar-rightin')

From 193762207b045c0d0657244edeb09b0829879e77 Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Thu, 1 May 2025 23:51:27 +0800
Subject: [PATCH 14/14] test: add tags

---
 src/packages/searchbar/__tests__/searchbar.spec.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/packages/searchbar/__tests__/searchbar.spec.tsx b/src/packages/searchbar/__tests__/searchbar.spec.tsx
index 49363ef7fc..e50c5eb4d9 100644
--- a/src/packages/searchbar/__tests__/searchbar.spec.tsx
+++ b/src/packages/searchbar/__tests__/searchbar.spec.tsx
@@ -26,6 +26,12 @@ test('should display left and right text', () => {
   )
 })
 
+test('should render with tags', () => {
+  const { container } = render(<SearchBar tag value="add,add3" />)
+  const dvalues = container.querySelectorAll('.nut-searchbar-value')
+  expect(dvalues.length).toBe(2)
+})
+
 test('should render right-in element', () => {
   const { container, rerender } = render(<SearchBar rightIn="搜索" />)
   const rightin = container.querySelectorAll('.nut-searchbar-rightin')