fix(searchbar): 支付宝小程序设置 enableInPageRenderInput 后无法触发 onChange

src/packages/searchbar/searchbar.taro.tsx

@@ -1,6 +1,12 @@
-import type { MouseEvent } from 'react'
+import Taro from '@tarojs/taro'
 import React, { FunctionComponent, useEffect, useRef, useState } from 'react'
-import { Input as TaroInput, ITouchEvent, View } from '@tarojs/components'
+import {
+  Input as TaroInput,
+  ITouchEvent,
+  InputProps,
+  View,
+  BaseEventOrig,
+} from '@tarojs/components'
 import { ArrowLeft, MaskClose, Search } from '@nutui/icons-react-taro'
 import { useConfig } from '@/packages/configprovider/index.taro'
 import { ComponentDefaults } from '@/utils/typings'
@@ -31,7 +37,7 @@ export const SearchBar: FunctionComponent<
   const classPrefix = 'nut-searchbar'
 
   const { locale } = useConfig()
-  const searchRef = useRef<HTMLInputElement>(null)
+  const searchRef = useRef<HTMLInputElement | null>(null)
 
   const {
     value: outerValue,
@@ -66,17 +72,17 @@ export const SearchBar: FunctionComponent<
     const searchSelf: HTMLInputElement | null = searchRef.current
     searchSelf && searchSelf.focus()
   }
-  const onInput = (event: any) => {
+  const onInput = (event: BaseEventOrig<InputProps.inputEventDetail>) => {
     const eventValue = event?.detail?.value
     if (value === eventValue) return
     onChange && onChange?.(eventValue, event)
     setValue(eventValue)
     eventValue === '' && forceFocus()
   }
-  const focus = (event: any) => {
+  const focus = (event: BaseEventOrig<InputProps.inputForceEventDetail>) => {
     onFocus && onFocus(event?.detail?.value, event)
   }
-  const blur = (event: any) => {
+  const blur = (event: BaseEventOrig<InputProps.inputValueEventDetail>) => {
     const searchSelf: HTMLInputElement | null = searchRef.current
     searchSelf && searchSelf.blur()
     onBlur && onBlur(event?.detail?.value, event)
@@ -85,7 +91,9 @@ export const SearchBar: FunctionComponent<
     setValue(outerValue || '')
   }, [outerValue])
   useEffect(() => {
-    autoFocus && forceFocus()
+    if (Taro.getEnv() === 'WEB') {
+      autoFocus && forceFocus()
+    }
   }, [autoFocus])
   const renderField = () => {
     return (
@@ -94,10 +102,12 @@ export const SearchBar: FunctionComponent<
           clearable ? `${classPrefix}-input-clear` : ''
         }`}
         ref={searchRef}
-        value={value || ''}
+        style={style}
+        value={(value || '').toString()}
         placeholder={placeholder || locale.placeholder}
         disabled={disabled || readOnly}
         maxlength={maxLength}
+        autoFocus={autoFocus}
         onInput={onInput}
         onFocus={focus}
         onBlur={blur}
@@ -106,7 +116,7 @@ export const SearchBar: FunctionComponent<
       />
     )
   }
-  const clickInput = (e: any) => {
+  const clickInput = (e: ITouchEvent) => {
     onInputClick && onInputClick(e)
   }
   const renderLeftIn = () => {
@@ -147,9 +157,7 @@ export const SearchBar: FunctionComponent<
       </View>
     )
   }
-  const clearaVal = (
-    event: React.MouseEvent<Element, MouseEvent> | ITouchEvent
-  ) => {
+  const clearaVal = (event: ITouchEvent) => {
     if (disabled || readOnly) {
       return
     }

src/types/spec/searchbar/taro.ts

@@ -1,15 +1,18 @@
-import type { ChangeEvent, FocusEvent, MouseEvent } from 'react'
-import { ITouchEvent } from '@tarojs/components'
+import { BaseEventOrig, ITouchEvent, InputProps } from '@tarojs/components'
 import { BaseSearchBar } from './base'
 
+type inputEventDetail = InputProps.inputEventDetail
+type inputForceEventDetail = InputProps.inputForceEventDetail
+type inputValueEventDetail = InputProps.inputValueEventDetail
+
 export interface TaroSearchBarProps
   extends Omit<
     BaseSearchBar,
     'onChange' | 'onFocus' | 'onBlur' | 'onClear' | 'onInputClick'
   > {
-  onChange?: (value: string, event?: ChangeEvent<HTMLInputElement>) => void
-  onFocus?: (value: string, event: FocusEvent<HTMLInputElement>) => void
-  onBlur?: (value: string, event: FocusEvent<HTMLInputElement>) => void
-  onClear?: (event: React.MouseEvent<Element, MouseEvent> | ITouchEvent) => void
-  onInputClick?: (event: MouseEvent<HTMLInputElement>) => void
+  onChange?: (value: string, event?: BaseEventOrig<inputEventDetail>) => void
+  onFocus?: (value: string, event: BaseEventOrig<inputForceEventDetail>) => void
+  onBlur?: (value: string, event: BaseEventOrig<inputValueEventDetail>) => void
+  onClear?: (event: ITouchEvent) => void
+  onInputClick?: (event: ITouchEvent) => void
 }