From 3a6028f0ba59ca59ec8cd6ad290a7993d6fa1bc8 Mon Sep 17 00:00:00 2001
From: Romain Le Cellier <rlecellier@gmail.com>
Date: Thu, 21 Sep 2023 17:28:03 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(rect)=20fix=20rhf=20select=20examp?=
 =?UTF-8?q?le?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

clearing the select trigger a infinit loop
---
 .changeset/fifty-jokes-dress.md                              | 5 +++++
 packages/react/src/components/Forms/Select/stories-utils.tsx | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/fifty-jokes-dress.md

diff --git a/.changeset/fifty-jokes-dress.md b/.changeset/fifty-jokes-dress.md
new file mode 100644
index 0000000..8878815
--- /dev/null
+++ b/.changeset/fifty-jokes-dress.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+Fix Select usage with react hook form
diff --git a/packages/react/src/components/Forms/Select/stories-utils.tsx b/packages/react/src/components/Forms/Select/stories-utils.tsx
index b8928de..e7e81e1 100644
--- a/packages/react/src/components/Forms/Select/stories-utils.tsx
+++ b/packages/react/src/components/Forms/Select/stories-utils.tsx
@@ -4,7 +4,7 @@ import { Select } from ":/components/Forms/Select/index";
 import { SelectProps } from ":/components/Forms/Select/mono";
 
 export const RhfSelect = (props: SelectProps & { name: string }) => {
-  const { control } = useFormContext();
+  const { control, setValue } = useFormContext();
   return (
     <Controller
       control={control}
@@ -16,7 +16,7 @@ export const RhfSelect = (props: SelectProps & { name: string }) => {
             state={fieldState.error ? "error" : "default"}
             text={fieldState.error?.message}
             onBlur={field.onBlur}
-            onChange={field.onChange}
+            onChange={(e) => setValue(field.name, e.target.value)}
             value={field.value}
           />
         );