From 5dde542952d904a6cc7770828b5034fbf08c3f33 Mon Sep 17 00:00:00 2001
From: zomars <zomars@me.com>
Date: Fri, 6 May 2022 15:46:31 -0600
Subject: [PATCH] Form fixes

---
 packages/ui/form/fields.tsx | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/ui/form/fields.tsx b/packages/ui/form/fields.tsx
index 44dcb7dd32..db3b0e4136 100644
--- a/packages/ui/form/fields.tsx
+++ b/packages/ui/form/fields.tsx
@@ -1,5 +1,5 @@
 import { useId } from "@radix-ui/react-id";
-import { forwardRef, ReactElement, ReactNode, Ref } from "react";
+import React, { forwardRef, ReactElement, ReactNode, Ref } from "react";
 import { FieldValues, FormProvider, SubmitHandler, useFormContext, UseFormReturn } from "react-hook-form";
 
 import classNames from "@calcom/lib/classNames";
@@ -179,7 +179,7 @@ export const TextAreaField = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>
   );
 });
 
-type FormProps<T> = { form: UseFormReturn<T>; handleSubmit: SubmitHandler<T> } & Omit<
+type FormProps<T extends object> = { form: UseFormReturn<T>; handleSubmit: SubmitHandler<T> } & Omit<
   JSX.IntrinsicElements["form"],
   "onSubmit"
 >;
@@ -199,7 +199,25 @@ const PlainForm = <T extends FieldValues>(props: FormProps<T>, ref: Ref<HTMLForm
             });
         }}
         {...passThrough}>
-        {props.children}
+        {
+          /* @see https://react-hook-form.com/advanced-usage/#SmartFormComponent */
+          React.Children.map(props.children, (child) => {
+            return typeof child !== "string" &&
+              typeof child !== "number" &&
+              typeof child !== "boolean" &&
+              child &&
+              "props" in child &&
+              child.props.name
+              ? React.createElement(child.type, {
+                  ...{
+                    ...child.props,
+                    register: form.register,
+                    key: child.props.name,
+                  },
+                })
+              : child;
+          })
+        }
       </form>
     </FormProvider>
   );