fix: click on radio button must trigger validation

SocialGouv · Nov 21, 2023 · ae7c7a6 · ae7c7a6
1 parent 858eda4
commit ae7c7a6
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/packages/app/src/components/RHF/PopulationFavorable.tsx b/packages/app/src/components/RHF/PopulationFavorable.tsx
@@ -12,8 +12,11 @@ export const PopulationFavorable = ({ legend, disabled }: Props) => {
   const {
     register,
     formState: { errors },
+    trigger,
   } = useFormContext();
 
+  const fieldMethods = register("populationFavorable");
+
   return (
     <RadioButtons
       legend={legend || "Population envers laquelle l'écart est favorable"}
@@ -23,14 +26,22 @@ export const PopulationFavorable = ({ legend, disabled }: Props) => {
           label: FavorablePopulation.Label[FavorablePopulation.Enum.WOMEN],
           nativeInputProps: {
             value: FavorablePopulation.Enum.WOMEN,
-            ...register("populationFavorable"),
+            ...fieldMethods,
+            onChange: e => {
+              trigger(); // Rerun validation to set isValid.
+              fieldMethods.onChange(e); // Inform RHF to update its state.
+            },
           },
         },
         {
           label: FavorablePopulation.Label[FavorablePopulation.Enum.MEN],
           nativeInputProps: {
             value: FavorablePopulation.Enum.MEN,
-            ...register("populationFavorable"),
+            ...fieldMethods,
+            onChange: e => {
+              trigger(); // Rerun validation to set isValid.
+              fieldMethods.onChange(e); // Inform RHF to update its state.
+            },
           },
         },
       ]}

diff --git a/packages/app/src/components/RHF/RadioOuiNon.tsx b/packages/app/src/components/RHF/RadioOuiNon.tsx
@@ -9,10 +9,12 @@ type Props = {
 };
 
 export const RadioOuiNon = ({ legend, name, disabled }: PropsWithChildren<Props>) => {
-  const { register } = useFormContext();
+  const { register, trigger } = useFormContext();
 
   disabled = disabled || false;
 
+  const fieldMethods = register(name);
+
   return (
     <RadioButtons
       legend={legend}
@@ -22,14 +24,22 @@ export const RadioOuiNon = ({ legend, name, disabled }: PropsWithChildren<Props>
           label: "Oui",
           nativeInputProps: {
             value: "oui",
-            ...register(name),
+            ...fieldMethods,
+            onChange: e => {
+              trigger(); // Rerun validation to set isValid.
+              fieldMethods.onChange(e); // Inform RHF to update its state.
+            },
           },
         },
         {
           label: "Non",
           nativeInputProps: {
             value: "non",
             ...register(name),
+            onChange: e => {
+              trigger(); // Rerun validation to set isValid.
+              fieldMethods.onChange(e); // Inform RHF to update its state.
+            },
           },
         },
       ]}