fix(searchbar): 修复 clear 时未触发 change 的问题

src/packages/searchbar/__tests__/searchbar.spec.tsx

@@ -1,18 +1,18 @@
 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',
     '请输入文字'
   )
 })
 
 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('')
+})

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',

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',

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) => {

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()
   }