🐛 fix: fix Input ref props

ant-design · Jun 16, 2023 · da05109 · da05109
1 parent 5e5cd62
commit da05109
Showing 1 changed file with 30 additions and 21 deletions.
diff --git a/src/antd/Input.tsx b/src/antd/Input.tsx
@@ -1,6 +1,6 @@
-import { InputProps as Props, Input as _Input } from 'antd';
-import type { FC } from 'react';
-import { useRef } from 'react';
+import { InputRef, InputProps as Props, Input as _Input } from 'antd';
+import { forwardRef, useRef } from 'react';
+
 import { ConfigProvider } from '../ConfigProvider';
 import { createStyles } from '../theme';
 
@@ -12,22 +12,31 @@ const useStyles = createStyles(
   `,
 );
 
-export const Input: FC<InputProps> = ({ className, ...props }) => {
-  const { styles, cx } = useStyles();
-  const compositionRef = useRef(false);
+export const Input = forwardRef<InputRef, InputProps>(
+  ({ className, onCompositionStart, onCompositionEnd, ...props }, ref) => {
+    const { styles, cx } = useStyles();
+    const compositionRef = useRef(false);
 
-  return (
-    <ConfigProvider>
-      <_Input
-        onCompositionStart={() => (compositionRef.current = true)}
-        onCompositionEnd={() => (compositionRef.current = false)}
-        {...props}
-        className={cx(styles, className)}
-        onPressEnter={(e) => {
-          if (compositionRef.current) return;
-          props.onPressEnter?.(e);
-        }}
-      />
-    </ConfigProvider>
-  );
-};
+    return (
+      <ConfigProvider>
+        <_Input
+          {...props}
+          ref={ref}
+          className={cx(styles, className)}
+          onPressEnter={(e) => {
+            if (compositionRef.current) return;
+            props.onPressEnter?.(e);
+          }}
+          onCompositionStart={(e) => {
+            compositionRef.current = true;
+            onCompositionStart?.(e);
+          }}
+          onCompositionEnd={(e) => {
+            compositionRef.current = false;
+            onCompositionEnd?.(e);
+          }}
+        />
+      </ConfigProvider>
+    );
+  },
+);