From 12d47ab94988b5489d2d8b776bdb30db94e01729 Mon Sep 17 00:00:00 2001
From: Jeroen Reumkens <hello@jeroenreumkens.nl>
Date: Wed, 16 Nov 2022 14:41:40 +0100
Subject: [PATCH] Update UI components to be able to use them in Console
 (#5514)

* First steps in updating console ui components.

* Replaced remaining v1 components.

* Removed todo.

* Removed createelement from form component since we were not using it at all (we wrapped all our inputs in divs), and any input that was not wrapped, was actually broken...

* Undo update submodule.

* Reverted website submodule update.
---
 apps/web/pages/auth/setup.tsx                |  2 +-
 packages/ui/components/form/inputs/Input.tsx | 20 +-------------------
 packages/ui/v2/core/WizardForm.tsx           |  4 ++--
 3 files changed, 4 insertions(+), 22 deletions(-)

diff --git a/apps/web/pages/auth/setup.tsx b/apps/web/pages/auth/setup.tsx
index 522846291b..c507f35c83 100644
--- a/apps/web/pages/auth/setup.tsx
+++ b/apps/web/pages/auth/setup.tsx
@@ -90,7 +90,7 @@ const SetupFormStep1 = (props: { setIsLoading: (val: boolean) => void }) => {
 
   return (
     <FormProvider {...formMethods}>
-      <form id="setup-step-1" name="setup-step-1" className="space-y-4" onSubmit={onSubmit}>
+      <form id="wizard-step-1" name="wizard-step-1" className="space-y-4" onSubmit={onSubmit}>
         <div>
           <Controller
             name="username"
diff --git a/packages/ui/components/form/inputs/Input.tsx b/packages/ui/components/form/inputs/Input.tsx
index 674d090f20..908704fb3f 100644
--- a/packages/ui/components/form/inputs/Input.tsx
+++ b/packages/ui/components/form/inputs/Input.tsx
@@ -296,25 +296,7 @@ const PlainForm = <T extends FieldValues>(props: FormProps<T>, ref: Ref<HTMLForm
             });
         }}
         {...passThrough}>
-        {
-          /* @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;
-          })
-        }
+        {props.children}
       </form>
     </FormProvider>
   );
diff --git a/packages/ui/v2/core/WizardForm.tsx b/packages/ui/v2/core/WizardForm.tsx
index 1da07e5fac..5b2f56d272 100644
--- a/packages/ui/v2/core/WizardForm.tsx
+++ b/packages/ui/v2/core/WizardForm.tsx
@@ -52,8 +52,8 @@ function WizardForm<T extends DefaultStep>(props: { href: string; steps: T[]; co
               loading={currentStep.isLoading}
               type="submit"
               color="primary"
-              form={`setup-step-${step}`}
-              className="relative">
+              form={`wizard-step-${step}`}
+              className="relative ml-3">
               {step < steps.length ? "Next" : "Finish"}
             </Button>
           </div>