fix(input): simulate a change event when the value of input is reset

components/input/input-icon-clear.tsx

@@ -22,7 +22,7 @@ const InputIconClear: React.FC<Props> = ({
     onClick && onClick(event)
   }
   return (
-    <div onClick={clickHandler} className={`${visibale ? 'visibale' : ''}`}>
+    <div onClick={clickHandler} className={`clear-icon ${visibale ? 'visibale' : ''}`}>
       <svg viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"
         strokeLinejoin="round" fill="none" shapeRendering="geometricPrecision">
         <path d="M18 6L6 18" />
@@ -30,7 +30,7 @@ const InputIconClear: React.FC<Props> = ({
       </svg>
   
       <style jsx>{`
-        div {
+        .clear-icon {
           padding: 0 ${theme.layout.gapHalf};
           margin: 0;
           display: inline-flex;
@@ -49,7 +49,7 @@ const InputIconClear: React.FC<Props> = ({
           opacity: 1;
         }
         
-        div:hover {
+        .clear-icon:hover {
           color: ${disabled ? theme.palette.accents_3 : theme.palette.foreground};
         }
         

components/input/input.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import useTheme from '../styles/use-theme'
 import InputLabel from './input-label'
 import InputBlockLabel from './input-block-label'
@@ -46,12 +46,24 @@ const defaultProps = {
 type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof Props>
 export type InputProps = Props & typeof defaultProps & NativeAttrs
 
+const simulateChangeEvent = (
+  el: HTMLInputElement,
+  event: React.MouseEvent<HTMLDivElement>
+): React.ChangeEvent<HTMLInputElement> => {
+  return {
+    ...event,
+    target: el,
+    currentTarget: el,
+  }
+}
+
 const Input: React.FC<React.PropsWithChildren<InputProps>> = ({
   placeholder, label, labelRight, size, status, disabled,
   icon, iconRight, initialValue, onChange, readOnly, value,
   onClearClick, clearable, width, className, onBlur, onFocus,
   autoComplete, children, ...props
 }) => {
+  const ref = useRef<HTMLInputElement>(null)
   const theme = useTheme()
   const [selfValue, setSelfValue] = useState<string>(initialValue)
   const [hover, setHover] = useState<boolean>(false)
@@ -78,6 +90,11 @@ const Input: React.FC<React.PropsWithChildren<InputProps>> = ({
   const clearHandler = (event: React.MouseEvent<HTMLDivElement>) => {
     setSelfValue('')
     onClearClick && onClearClick(event)
+    if (!ref.current) return
+    
+    const changeEvent = simulateChangeEvent(ref.current, event)
+    changeEvent.target.value = ''
+    onChange && onChange(changeEvent)
   }
   
   const focusHandler = (e: React.FocusEvent<HTMLInputElement>) => {
@@ -101,7 +118,8 @@ const Input: React.FC<React.PropsWithChildren<InputProps>> = ({
         {label && <InputLabel fontSize={fontSize}>{label}</InputLabel>}
         <div className={`input-wrapper ${hover ? 'hover' : ''} ${disabled ? 'disabled' : ''} ${labelClasses}`}>
           {icon && <InputIcon icon={icon} ratio={heightRatio} />}
-          <input type="text" className={`${disabled ? 'disabled' : ''} ${iconClasses}`}
+          <input type="text" ref={ref}
+            className={`${disabled ? 'disabled' : ''} ${iconClasses}`}
             value={selfValue}
             placeholder={placeholder}
             disabled={disabled}