From 034e2994078e40b09fae7e17cd5070d52cc7c51c Mon Sep 17 00:00:00 2001
From: Romain Le Cellier <rlecellier@gmail.com>
Date: Thu, 21 Sep 2023 16:18:01 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(react)=20fix=20rhf=20reset?=
 =?UTF-8?q?=20with=20Input?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

when using reset(), Input field value wasn't updated
---
 .changeset/fresh-ghosts-lick.md               |  5 +++
 .../Examples/ReactHookForm/Login.stories.tsx  |  6 ++--
 .../Examples/ReactHookForm/Sports.stories.tsx | 35 ++++++++++++++++---
 .../components/Forms/Input/stories-utils.tsx  | 26 ++++++++++++++
 4 files changed, 64 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/fresh-ghosts-lick.md
 create mode 100644 packages/react/src/components/Forms/Input/stories-utils.tsx

diff --git a/.changeset/fresh-ghosts-lick.md b/.changeset/fresh-ghosts-lick.md
new file mode 100644
index 0000000..5b53ceb
--- /dev/null
+++ b/.changeset/fresh-ghosts-lick.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+Fix input usage with react hook form
diff --git a/packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx b/packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx
index 3371587..b3fcac6 100644
--- a/packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx
+++ b/packages/react/src/components/Forms/Examples/ReactHookForm/Login.stories.tsx
@@ -3,7 +3,7 @@ import { Meta } from "@storybook/react";
 import React from "react";
 import { useForm } from "react-hook-form";
 import * as Yup from "yup";
-import { Input } from ":/components/Forms/Input";
+import { RhfInput } from ":/components/Forms/Input/stories-utils";
 import { Checkbox } from ":/components/Forms/Checkbox";
 import { Button } from ":/components/Button";
 import {
@@ -56,14 +56,14 @@ export const Login = () => {
       >
         Log in
       </h1>
-      <Input
+      <RhfInput
         label="Email"
         fullWidth={true}
         state={getFieldState("email", formState)}
         text={getFieldErrorMessage("email", formState)}
         {...register("email")}
       />
-      <Input
+      <RhfInput
         label="Password"
         state={getFieldState("password", formState)}
         type="password"
diff --git a/packages/react/src/components/Forms/Examples/ReactHookForm/Sports.stories.tsx b/packages/react/src/components/Forms/Examples/ReactHookForm/Sports.stories.tsx
index 4c8c3fe..7b1b4a7 100644
--- a/packages/react/src/components/Forms/Examples/ReactHookForm/Sports.stories.tsx
+++ b/packages/react/src/components/Forms/Examples/ReactHookForm/Sports.stories.tsx
@@ -1,9 +1,9 @@
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Meta } from "@storybook/react";
-import React from "react";
+import React, { useEffect } from "react";
 import { useForm, FormProvider } from "react-hook-form";
 import * as Yup from "yup";
-import { Input } from ":/components/Forms/Input";
+import { RhfInput } from ":/components/Forms/Input/stories-utils";
 import { Button } from ":/components/Button";
 import { CunninghamProvider } from ":/components/Provider";
 import { Radio, RadioGroup } from ":/components/Forms/Radio";
@@ -34,7 +34,11 @@ const sportsSchema = Yup.object().shape({
   rewards: Yup.array().of(Yup.string().defined()).defined(),
 });
 
-export const Sports = () => {
+export interface SportProps {
+  values?: SportsStoryFormValues;
+}
+
+const SportsBase = ({ values }: SportProps) => {
   const methods = useForm<SportsStoryFormValues>({
     defaultValues: {
       firstName: "",
@@ -46,6 +50,10 @@ export const Sports = () => {
     resolver: yupResolver(sportsSchema),
   });
 
+  useEffect(() => {
+    methods.reset(values);
+  }, [values]);
+
   return (
     <CunninghamProvider>
       <FormProvider {...methods}>
@@ -75,28 +83,31 @@ export const Sports = () => {
               <Radio
                 label="Male"
                 state={getFieldState("gender", methods.formState)}
+                value="male"
                 {...methods.register("gender")}
               />
               <Radio
                 label="Female"
+                value="female"
                 state={getFieldState("gender", methods.formState)}
                 {...methods.register("gender")}
               />
               <Radio
                 label="Other"
+                value="other"
                 state={getFieldState("gender", methods.formState)}
                 {...methods.register("gender")}
               />
             </RadioGroup>
           </div>
           <div style={{ display: "flex", gap: "1rem" }}>
-            <Input
+            <RhfInput
               label="First name"
               state={getFieldState("firstName", methods.formState)}
               text={getFieldErrorMessage("firstName", methods.formState)}
               {...methods.register("firstName")}
             />
-            <Input
+            <RhfInput
               label="Last name"
               state={getFieldState("lastName", methods.formState)}
               text={getFieldErrorMessage("lastName", methods.formState)}
@@ -159,3 +170,17 @@ export const Sports = () => {
     </CunninghamProvider>
   );
 };
+
+export const Sports = () => <SportsBase />;
+
+export const SportsEdit = () => (
+  <SportsBase
+    values={{
+      firstName: "Evans",
+      lastName: "Chebet",
+      competition: "Marathon",
+      rewards: ["Gold"],
+      gender: "male",
+    }}
+  />
+);
diff --git a/packages/react/src/components/Forms/Input/stories-utils.tsx b/packages/react/src/components/Forms/Input/stories-utils.tsx
new file mode 100644
index 0000000..8cf480d
--- /dev/null
+++ b/packages/react/src/components/Forms/Input/stories-utils.tsx
@@ -0,0 +1,26 @@
+import { Controller, useFormContext } from "react-hook-form";
+import React from "react";
+import { Input, InputProps } from ".";
+
+export const RhfInput = (props: InputProps & { name: string }) => {
+  const { control, setValue } = useFormContext();
+  return (
+    <Controller
+      control={control}
+      name={props.name}
+      render={({ field, fieldState }) => {
+        return (
+          <Input
+            {...props}
+            aria-invalid={!!fieldState.error}
+            state={fieldState.error ? "error" : "default"}
+            text={fieldState.error?.message}
+            onBlur={field.onBlur}
+            onChange={(e) => setValue(field.name, e.target.value)}
+            value={field.value}
+          />
+        );
+      }}
+    />
+  );
+};