From 657de89be7f36d60353f524296b01991d983cc0c Mon Sep 17 00:00:00 2001
From: eiinu <eiinu@qq.com>
Date: Fri, 17 May 2024 10:14:29 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix(searchbar):=20clear=20=E6=97=B6?=
 =?UTF-8?q?=E5=90=8C=E6=97=B6=E8=A7=A6=E5=8F=91=20change=20=E4=BA=8B?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/packages/searchbar/searchbar.taro.tsx b/src/packages/searchbar/searchbar.taro.tsx
index cf17c37284..87690c1eed 100644
--- a/src/packages/searchbar/searchbar.taro.tsx
+++ b/src/packages/searchbar/searchbar.taro.tsx
@@ -29,7 +29,7 @@ export interface SearchBarProps extends BasicComponent {
   /**  确定搜索时触发	 */
   onSearch?: (val: string) => void
   /** 输入框内容变化时触发	 */
-  onChange?: (value: string, event: ChangeEvent<HTMLInputElement>) => void
+  onChange?: (value: string, event?: ChangeEvent<HTMLInputElement>) => void
   /** 输入框获得焦点时触发	 */
   onFocus?: (value: string, event: FocusEvent<HTMLInputElement>) => void
   /** 输入框失去焦点时触发	 */
@@ -190,6 +190,7 @@ export const SearchBar: FunctionComponent<
     }
     setValue('')
     forceFocus()
+    onChange && onChange?.('')
     onClear && onClear(event)
   }
   const onKeypress = (e: any) => {
diff --git a/src/packages/searchbar/searchbar.tsx b/src/packages/searchbar/searchbar.tsx
index 1a79af092e..81822e56de 100644
--- a/src/packages/searchbar/searchbar.tsx
+++ b/src/packages/searchbar/searchbar.tsx
@@ -29,7 +29,7 @@ export interface SearchBarProps extends BasicComponent {
   /**  确定搜索时触发	 */
   onSearch?: (val: string) => void
   /** 输入框内容变化时触发	 */
-  onChange?: (value: string, event: ChangeEvent<HTMLInputElement>) => void
+  onChange?: (value: string, event?: ChangeEvent<HTMLInputElement>) => void
   /** 输入框获得焦点时触发	 */
   onFocus?: (value: string, event: FocusEvent<HTMLInputElement>) => void
   /** 输入框失去焦点时触发	 */
@@ -193,6 +193,7 @@ export const SearchBar: FunctionComponent<
       return
     }
     setValue('')
+    onChange && onChange?.('')
     onClear && onClear(event)
     forceFocus()
   }

From 07392bf18552c4ef8964ac80359fad15efc99ba6 Mon Sep 17 00:00:00 2001
From: eiinu <eiinu@qq.com>
Date: Fri, 17 May 2024 10:27:51 +0800
Subject: [PATCH 2/2] test(searchbar): add unit test

---
 .../searchbar/__tests__/searchbar.spec.tsx    | 23 +++++++++++++++----
 src/packages/searchbar/demos/h5/demo7.tsx     | 10 +-------
 src/packages/searchbar/demos/taro/demo7.tsx   | 10 +-------
 3 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/src/packages/searchbar/__tests__/searchbar.spec.tsx b/src/packages/searchbar/__tests__/searchbar.spec.tsx
index a0958e0859..0ed6bf7f3a 100644
--- a/src/packages/searchbar/__tests__/searchbar.spec.tsx
+++ b/src/packages/searchbar/__tests__/searchbar.spec.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react'
-import { render } from '@testing-library/react'
+import { fireEvent, render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import Searchbar from '@/packages/searchbar'
+import SearchBar from '@/packages/searchbar'
 
 test('basic usage', () => {
-  const { container } = render(<Searchbar placeholder="请输入文字" />)
+  const { container } = render(<SearchBar placeholder="请输入文字" />)
   expect(container.querySelector('.nut-searchbar-input')).toHaveAttribute(
     'placeholder',
     '请输入文字'
@@ -12,7 +12,7 @@ test('basic usage', () => {
 })
 
 test('should limit maxlength of input value when using maxlength prop', () => {
-  const { container } = render(<Searchbar shape="round" maxLength={5} />)
+  const { container } = render(<SearchBar shape="round" maxLength={5} />)
   expect(container.querySelector('.nut-searchbar-input')).toHaveAttribute(
     'maxlength',
     '5'
@@ -23,9 +23,22 @@ test('should limit maxlength of input value when using maxlength prop', () => {
 })
 
 test('Search box text settings', () => {
-  const { container } = render(<Searchbar left="文本" right="确定" />)
+  const { container } = render(<SearchBar left="文本" right="确定" />)
   expect(container.querySelector('.nut-searchbar-left')?.innerHTML).toBe('文本')
   expect(container.querySelector('.nut-searchbar-right')?.innerHTML).toBe(
     '确定'
   )
 })
+
+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('')
+})
diff --git a/src/packages/searchbar/demos/h5/demo7.tsx b/src/packages/searchbar/demos/h5/demo7.tsx
index fd56a7c864..7fa543d515 100644
--- a/src/packages/searchbar/demos/h5/demo7.tsx
+++ b/src/packages/searchbar/demos/h5/demo7.tsx
@@ -3,17 +3,9 @@ import { SearchBar } from '../../searchbar'
 
 const Demo7 = () => {
   const [value, setValue] = useState('')
-  const change = (val: string, e: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(val)
-  }
   return (
     <>
-      <SearchBar
-        onChange={(val: string, e: React.ChangeEvent<HTMLInputElement>) =>
-          change(val, e)
-        }
-        maxLength={10}
-      />
+      <SearchBar onChange={(val: string) => setValue(val)} maxLength={10} />
       <div
         style={{
           height: '40px',
diff --git a/src/packages/searchbar/demos/taro/demo7.tsx b/src/packages/searchbar/demos/taro/demo7.tsx
index ceb2ed2575..3fd144b806 100644
--- a/src/packages/searchbar/demos/taro/demo7.tsx
+++ b/src/packages/searchbar/demos/taro/demo7.tsx
@@ -3,17 +3,9 @@ import { SearchBar } from '@nutui/nutui-react-taro'
 
 const Demo7 = () => {
   const [value, setValue] = useState('')
-  const change = (val: string, e: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(val)
-  }
   return (
     <>
-      <SearchBar
-        onChange={(val: string, e: React.ChangeEvent<HTMLInputElement>) =>
-          change(val, e)
-        }
-        maxLength={10}
-      />
+      <SearchBar onChange={(val: string) => setValue(val)} maxLength={10} />
       <div
         style={{
           height: '40px',