✨ add forwardref to input component

.changeset/moody-mirrors-itch.md

@@ -0,0 +1,5 @@
+---
+"@tonightpass/kitchen": patch
+---
+
+Set forwardRef to Input component

packages/kitchen/src/components/Input/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { forwardRef, useImperativeHandle } from "react";
 import { RiCloseCircleLine } from "react-icons/ri";
 import styled from "styled-components";
 
@@ -47,31 +47,34 @@ export type InputProps = KitchenComponent<
   React.InputHTMLAttributes<HTMLInputElement>
 >;
 
-const Input = styled(
-  ({
-    size = "normal",
-    prefix,
-    suffix,
-    disabled = false,
-    prefixContainer = true,
-    suffixContainer = true,
-    prefixStyling = true,
-    suffixStyling = true,
-    clearable = false,
-    value,
-    initialValue = "",
-    readOnly = false,
-    onChange,
-    width,
-    onClearClick,
-    onFocus,
-    onBlur,
-    error,
-    type,
-    label,
-    ...props
-  }: InputProps) => {
-    const inputRef = React.useRef<HTMLInputElement>();
+const ForwardedInput = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      size = "normal",
+      prefix,
+      suffix,
+      disabled = false,
+      prefixContainer = true,
+      suffixContainer = true,
+      prefixStyling = true,
+      suffixStyling = true,
+      clearable = false,
+      value,
+      initialValue = "",
+      readOnly = false,
+      onChange,
+      width,
+      onClearClick,
+      onFocus,
+      onBlur,
+      error,
+      type,
+      label,
+      ...props
+    }: InputProps,
+    ref: React.Ref<HTMLInputElement>,
+  ) => {
+    const inputRef = React.useRef<HTMLInputElement>(null);
     const [selfValue, setSelfValue] = React.useState<string>(initialValue);
     const [focus, setFocus] = React.useState<boolean>(false);
     const [clearIconHover, setClearIconHover] = React.useState<boolean>(false);
@@ -80,6 +83,8 @@ const Input = styled(
       [value],
     );
 
+    useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);
+
     const Wrapper = label ? "label" : React.Fragment;
 
     const controlledValue = isControlledComponent
@@ -223,7 +228,11 @@ const Input = styled(
       </Wrapper>
     );
   },
-)`
+);
+
+ForwardedInput.displayName = "Input";
+
+const Input = styled(ForwardedInput)`
   font: inherit;
   width: 100%;
   min-width: 0;

workshop/pages/input.tsx

@@ -9,9 +9,19 @@ type FormData = {
 };
 
 const InputPage: NextPage = () => {
-  const { control, handleSubmit } = useForm<FormData>();
+  const { control, handleSubmit: handleSubmitControl } = useForm<FormData>();
 
-  const onSubmit = handleSubmit((data) => {
+  const onSubmitControl = handleSubmitControl((data) => {
+    console.log(data);
+  });
+
+  const {
+    register,
+    handleSubmit: handleSubmitRegistered,
+    formState: { isValid: isValidRegistered },
+  } = useForm<FormData>();
+
+  const onSubmitRegistered = handleSubmitRegistered((data) => {
     console.log(data);
   });
 
@@ -305,11 +315,28 @@ const InputPage: NextPage = () => {
           </Container>
         </Container>
 
+        <Container gap={5}>
+          <Text>{"registered"}</Text>
+          <Text>{`is valid : ${isValidRegistered}`}</Text>
+          <Container row>
+            <Container align={"flex-start"}>
+              <form onSubmit={onSubmitRegistered}>
+                <Input
+                  {...register("name", {
+                    required: true,
+                    maxLength: 20,
+                  })}
+                />
+              </form>
+            </Container>
+          </Container>
+        </Container>
+
         <Container gap={5}>
           <Text>{"controlled"}</Text>
           <Container row>
             <Container align={"flex-start"}>
-              <form onSubmit={onSubmit}>
+              <form onSubmit={onSubmitControl}>
                 <ControlledInput name={"name"} control={control} />
               </form>
             </Container>