fix: onBlur

Author: ntatoud

app/components/form/field-radio-group/index.tsx

@@ -60,7 +60,7 @@ export const FieldRadioGroup = <
       disabled={disabled}
       defaultValue={defaultValue}
       shouldUnregister={shouldUnregister}
-      render={({ field: { onChange, ...field }, fieldState }) => (
+      render={({ field: { onChange, onBlur, ...field }, fieldState }) => (
         <div
           {...containerProps}
           className={cn(
@@ -82,9 +82,10 @@ export const FieldRadioGroup = <
           >
             {options.map((option) => (
               <Radio
-                key={option.value}
+                key={`${ctx.id}-${option.value}`}
                 value={option.value}
                 disabled={option.disabled}
+                onBlur={onBlur}
               >
                 {option.label}
               </Radio>

app/components/ui/radio-group.tsx

@@ -28,6 +28,8 @@ function Radio({
   children,
   ...props
 }: RadioProps) {
+  const _radioId = React.useId();
+
   return (
     <div
       {...containerProps}
@@ -38,7 +40,7 @@ function Radio({
           'peer aspect-square h-4 w-4 cursor-pointer rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}
-        id={value}
+        id={_radioId}
         value={value}
         {...props}
       >
@@ -47,7 +49,7 @@ function Radio({
         </RadioGroupPrimitive.Indicator>
       </RadioGroupPrimitive.Item>
       <label
-        htmlFor={value}
+        htmlFor={_radioId}
         {...labelProps}
         className={cn(
           'cursor-pointer text-xs peer-disabled:cursor-not-allowed',