fix(InputButton): handle events (#1841)

Co-authored-by: Zhang Rui <zhangrui@growingio.com>

src/input/Input.tsx

@@ -48,13 +48,6 @@ const Input = React.forwardRef<HTMLSpanElement, InputProps>((props, ref) => {
     [onPressEnter, onKeyPress]
   );
 
-  // const handleChange = useCallback(
-  //   (e: React.ChangeEvent<HTMLInputElement>) => {
-  //     onChange?.(e);
-  //   },
-  //   [onChange]
-  // );
-
   const prefixFcCls = useMemo(
     () =>
       classNames(`${prefixCls}__prefix`, {
@@ -91,7 +84,7 @@ const Input = React.forwardRef<HTMLSpanElement, InputProps>((props, ref) => {
     [suffixCls, customizeSuffix, eventRest]
   );
   return (
-    <span className={inputClass} style={style} ref={ref}>
+    <span className={inputClass} style={style} ref={ref} {...eventRest}>
       {prefix}
       <input
         data-testid="input"

src/input/InputButton.tsx

@@ -72,9 +72,11 @@ const InputButton = React.forwardRef<HTMLInputElement, InputButtonProps>((props,
 
   const suffix = useMemo(() => {
     const hideClear = allowClear === false;
-    const defaultSuffix = value && !hideClear && !disabled ? <CloseCircleFilled onClick={onClear} /> : <DownFilled />;
+    const { onClick } = rest;
+    const defaultSuffix =
+      value && !hideClear && !disabled ? <CloseCircleFilled onClick={onClear} /> : <DownFilled onClick={onClick} />;
     return customizeSuffix || defaultSuffix;
-  }, [customizeSuffix, value, onClear, allowClear, disabled]);
+  }, [customizeSuffix, value, onClear, allowClear, disabled, rest]);
 
   const styles = maxWidth ? { maxWidth } : {};
 

src/input/style/index.less

@@ -84,7 +84,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    margin-left: 8px;
+    padding-left: 8px;
     cursor: pointer;
     svg {
       width: 14px;
@@ -97,7 +97,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    margin-right: 8px;
+    padding-right: 8px;
     cursor: pointer;
     svg {
       width: 14px;