fix(components): add forwardRef for input and textarea

affects: @gio-design/components ISSUES CLOSED: #179
growingio · Sep 9, 2020 · 5f1a6d1 · 5f1a6d1
1 parent 3d7e8c8
commit 5f1a6d1
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 3 deletions.
diff --git a/packages/components/src/components/input/Input.tsx b/packages/components/src/components/input/Input.tsx
@@ -17,8 +17,9 @@ const Input: React.FC<InputProps> = ({
   size = 'medium',
   suffix,
   wrapStyle,
+  forwardRef,
   ...rest
-}) => {
+}: InputProps) => {
   const { realTimeValue, handleOnChange } = useEnter(value, onChange);
 
   const wrapClass = classNames(prefixCls, {
@@ -61,6 +62,7 @@ const Input: React.FC<InputProps> = ({
         readOnly={readOnly}
         placeholder={placeholder}
         style={inputStyle}
+        ref={forwardRef}
         {...rest}
       />
       {renderSuffix()}

diff --git a/packages/components/src/components/input/InputNumber.tsx b/packages/components/src/components/input/InputNumber.tsx
@@ -11,7 +11,7 @@ const InputNumber: React.FC<InputProps> = ({
   disabled = false,
   readOnly = false,
   ...rest
-}) => {
+}: InputProps) => {
   const addDisabled = React.useMemo(() => Number(value) >= max || disabled || readOnly, [
     value,
     max,

diff --git a/packages/components/src/components/input/TextArea.tsx b/packages/components/src/components/input/TextArea.tsx
@@ -12,8 +12,9 @@ const TextArea: React.FC<TextAreaProps> = ({
   placeholder = '',
   inputStyle,
   wrapStyle,
+  forwardRef,
   ...rest
-}) => {
+}: TextAreaProps) => {
   const { realTimeValue, handleOnChange } = useEnter(value, onChange);
 
   const inputClass = classNames(`${prefixCls}-content`, `${prefixCls}-textarea`, {
@@ -29,6 +30,7 @@ const TextArea: React.FC<TextAreaProps> = ({
         disabled={disabled}
         placeholder={placeholder}
         style={inputStyle}
+        ref={forwardRef}
         {...rest}
       />
     </div>

diff --git a/packages/components/src/components/input/interfaces.ts b/packages/components/src/components/input/interfaces.ts
@@ -10,6 +10,10 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
   wrapStyle?: React.CSSProperties;
   size?: 'large' | 'medium' | 'small';
   suffix?: React.ReactNode;
+  forwardRef?:
+    | React.RefObject<HTMLInputElement>
+    | React.MutableRefObject<HTMLInputElement>
+    | React.LegacyRef<HTMLInputElement>;
 }
 
 export interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange'> {
@@ -18,4 +22,8 @@ export interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTex
   resize?: boolean;
   inputStyle?: React.CSSProperties;
   wrapStyle?: React.CSSProperties;
+  forwardRef?:
+    | React.RefObject<HTMLTextAreaElement>
+    | React.MutableRefObject<HTMLTextAreaElement>
+    | React.LegacyRef<HTMLTextAreaElement>;
 }