fix(input): controlled mode, content clearing does not work

src/packages/input/__test__/input.spec.tsx

@@ -4,7 +4,8 @@ import '@testing-library/jest-dom'
 import Input from '@/packages/input'
 
 test('input props test', () => {
-  const { container } = render(
+  const blur = jest.fn()
+  const { container, rerender } = render(
     <Input name="text" placeholder="请输入文字" defaultValue="初始文本" />
   )
   expect(container.querySelector('.nut-input-native')).toHaveAttribute(
@@ -23,7 +24,44 @@ test('input props test', () => {
     'type',
     'text'
   )
-  expect(container).toMatchSnapshot()
+  rerender(
+    <Input type="number" placeholder="1" defaultValue="1" onBlur={blur} />
+  )
+  expect(container.querySelector('.nut-input-native')).toHaveAttribute(
+    'type',
+    'tel'
+  )
+  const telInput = container.querySelector('.nut-input-native') as HTMLElement
+  fireEvent.focus(telInput)
+  fireEvent.blur(telInput)
+  expect(blur).toBeCalled()
+
+  rerender(
+    <Input type="digit" placeholder="1" defaultValue="1.01" onBlur={blur} />
+  )
+  expect(container.querySelector('.nut-input-native')).toHaveAttribute(
+    'type',
+    'text'
+  )
+  const digitInput = container.querySelector('.nut-input-native') as HTMLElement
+  fireEvent.focus(digitInput)
+  fireEvent.blur(digitInput)
+  expect(blur).toBeCalled()
+  rerender(
+    <Input
+      name="text"
+      formatTrigger="onBlur"
+      placeholder="1"
+      defaultValue="1"
+      onBlur={blur}
+    />
+  )
+  const triggerInput = container.querySelector(
+    '.nut-input-native'
+  ) as HTMLElement
+  fireEvent.focus(triggerInput)
+  fireEvent.blur(triggerInput)
+  expect(blur).toBeCalled()
 })
 
 test('password test', () => {

src/packages/input/demo.taro.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import Taro from '@tarojs/taro'
 import { Tips, Close, Eye, Marshalling } from '@nutui/icons-react-taro'
 import { useTranslate } from '@/sites/assets/locale/taro'
-import { Input, Button } from '@/packages/nutui.react.taro'
+import { Input, Button, Cell } from '@/packages/nutui.react.taro'
 import Header from '@/sites/components/header'
 
 const InputDemo = () => {
@@ -28,6 +28,8 @@ const InputDemo = () => {
       readOnly: '输入框只读',
       disabled: '输入框禁用',
       clear: '显示清除图标',
+      clearControlled: '受控下的清除',
+      clearButton: '点我清除',
       codeplaceholder: '请输入短信验证码',
       sendCode: '获取验证码',
       border: '边框',
@@ -61,6 +63,8 @@ const InputDemo = () => {
       readOnly: 'Input box is read-only',
       disabled: 'Input box disabled',
       clear: 'Show clear icon',
+      clearControlled: 'Clearing in Controlled Mode',
+      clearButton: 'Click to Clear',
       codeplaceholder: 'Please enter the SMS verification code',
       sendCode: 'Get code',
       border: 'border',
@@ -78,7 +82,7 @@ const InputDemo = () => {
   const [val, setVal] = useState('NutUI React')
   const [inputType, setInputType] = useState('password')
   const [currentLength, setCurrentLength] = useState(0)
-
+  const [keyword, setKeyword] = useState('')
   return (
     <>
       <Header />
@@ -117,6 +121,26 @@ const InputDemo = () => {
           clearIcon={<Close size={14} />}
           placeholder={translated.clear}
         />
+        <h2>{translated.clearControlled}</h2>
+        <Cell
+          title={
+            <Input
+              placeholder={translated.clearControlled}
+              value={keyword}
+              onChange={setKeyword}
+            />
+          }
+          extra={
+            <Button
+              onClick={() => {
+                setKeyword('')
+              }}
+            >
+              {translated.clearButton}
+            </Button>
+          }
+        />
+
         <h2>{translated.wordCount}</h2>
         <div
           style={{

src/packages/input/doc.taro.md

@@ -144,6 +144,42 @@ export default App;
 
 :::
 
+### 受控下的清除
+
+:::demo
+
+```tsx
+import  React, { useState } from "react";
+import { Input, Cell, Button } from '@nutui/nutui-react-taro';
+
+const App = () => {
+  const [keyword, setKeyword] = useState('')
+  return (
+    <Cell
+      title={
+        <Input
+          placeholder="受控下的清除"
+          value={keyword}
+          onChange={setKeyword}
+        />
+      }
+      extra={
+        <Button
+          onClick={() => {
+            setKeyword('')
+          }}
+        >
+          点我清除
+        </Button>
+      }
+    />
+  )
+}
+export default App;
+```
+
+:::
+
 ### 格式化输入内容
 
 :::demo

src/packages/input/input.taro.tsx

@@ -167,22 +167,18 @@ export const Input = forwardRef(
       forceUpdate()
     }
 
-    const handleFocus = (event: Event) => {
-      const val: any = (event.target as any).value
-      onFocus && onFocus(val)
+    const handleFocus = () => {
+      onFocus?.(value)
       setActive(true)
     }
 
     const handleInput = (value: string) => {
       updateValue(value, 'onChange')
     }
 
-    const handleBlur = (event: Event) => {
-      const val: any = (event.target as any).value
-      updateValue(val, 'onBlur')
-      setTimeout(() => {
-        setActive(false)
-      }, 50)
+    const handleBlur = () => {
+      updateValue(value, 'onBlur')
+      setActive(false)
     }
     const inputType = (type: any) => {
       if (getEnv() === ENV_TYPE.WEB) {
@@ -220,12 +216,8 @@ export const Input = forwardRef(
           value={value}
           focus={autoFocus}
           confirmType={confirmType}
-          onBlur={(e: any) => {
-            handleBlur(e)
-          }}
-          onFocus={(e: any) => {
-            handleFocus(e)
-          }}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
           onInput={(e: any) => {
             handleInput(e.currentTarget.value)
           }}
@@ -241,10 +233,8 @@ export const Input = forwardRef(
           onClick={(e) => {
             e.stopPropagation()
             if (!disabled) {
-              setTimeout(() => {
-                setValue('')
-                onClear && onClear('')
-              }, 50)
+              setValue('')
+              onClear?.('')
             }
           }}
         >

src/packages/input/input.tsx

@@ -155,22 +155,18 @@ export const Input = forwardRef(
       }
     }
 
-    const handleFocus = (event: Event) => {
-      const val: any = (event.target as any).value
-      onFocus && onFocus(val)
+    const handleFocus = () => {
+      onFocus?.(value)
       setActive(true)
     }
 
     const handleInput = (value: string) => {
       updateValue(value, 'onChange')
     }
 
-    const handleBlur = (event: Event) => {
-      const val: any = (event.target as any).value
-      updateValue(val, 'onBlur')
-      setTimeout(() => {
-        setActive(false)
-      }, 200)
+    const handleBlur = () => {
+      updateValue(value, 'onBlur')
+      setActive(false)
     }
 
     const inputType = (type: string) => {
@@ -205,11 +201,11 @@ export const Input = forwardRef(
           value={value}
           autoFocus={autoFocus}
           enterKeyHint={confirmType}
-          onBlur={(e: any) => {
-            handleBlur(e)
+          onBlur={() => {
+            handleBlur()
           }}
-          onFocus={(e: any) => {
-            handleFocus(e)
+          onFocus={() => {
+            handleFocus()
           }}
           onChange={(e: any) => {
             handleInput(e.currentTarget.value)