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

---
 .../components/webhook/WebhookDialogForm.tsx  | 33 +++++++------
 .../components/apiKeys/ApiKeyDialogForm.tsx   | 17 +++----
 apps/web/pages/event-types/[type].tsx         | 46 ++++++++++---------
 3 files changed, 51 insertions(+), 45 deletions(-)

diff --git a/apps/web/components/webhook/WebhookDialogForm.tsx b/apps/web/components/webhook/WebhookDialogForm.tsx
index a676f4b1bc..b00266269c 100644
--- a/apps/web/components/webhook/WebhookDialogForm.tsx
+++ b/apps/web/components/webhook/WebhookDialogForm.tsx
@@ -58,7 +58,9 @@ export default function WebhookDialogForm(props: {
         props.handleClose();
       }}
       className="space-y-4">
-      <input type="hidden" {...form.register("id")} />
+      <div>
+        <input type="hidden" {...form.register("id")} />
+      </div>
       <fieldset className="space-y-2">
         <InputGroupBox className="border-0 bg-gray-50">
           <Controller
@@ -76,20 +78,21 @@ export default function WebhookDialogForm(props: {
           />
         </InputGroupBox>
       </fieldset>
-      <TextField
-        label={t("subscriber_url")}
-        {...form.register("subscriberUrl")}
-        required
-        type="url"
-        onChange={(e) => {
-          form.setValue("subscriberUrl", e.target.value);
-          if (hasTemplateIntegration({ url: e.target.value })) {
-            setUseCustomPayloadTemplate(true);
-            form.setValue("payloadTemplate", customTemplate({ url: e.target.value }));
-          }
-        }}
-      />
-
+      <div>
+        <TextField
+          label={t("subscriber_url")}
+          {...form.register("subscriberUrl")}
+          required
+          type="url"
+          onChange={(e) => {
+            form.setValue("subscriberUrl", e.target.value);
+            if (hasTemplateIntegration({ url: e.target.value })) {
+              setUseCustomPayloadTemplate(true);
+              form.setValue("payloadTemplate", customTemplate({ url: e.target.value }));
+            }
+          }}
+        />
+      </div>
       <fieldset className="space-y-2">
         <FieldsetLegend>{t("event_triggers")}</FieldsetLegend>
         <InputGroupBox className="border-0 bg-gray-50">
diff --git a/apps/web/ee/components/apiKeys/ApiKeyDialogForm.tsx b/apps/web/ee/components/apiKeys/ApiKeyDialogForm.tsx
index 831ccf9eb7..99730950cc 100644
--- a/apps/web/ee/components/apiKeys/ApiKeyDialogForm.tsx
+++ b/apps/web/ee/components/apiKeys/ApiKeyDialogForm.tsx
@@ -102,17 +102,18 @@ export default function ApiKeyDialogForm(props: {
             setSuccessfulNewApiKeyModal(true);
           }}
           className="space-y-4">
-          <div className=" mb-10 mt-1">
+          <div className="mb-10 mt-1">
             <h2 className="font-semi-bold font-cal text-xl tracking-wide text-gray-900">{props.title}</h2>
             <p className="mt-1 mb-5 text-sm text-gray-500">{t("api_key_modal_subtitle")}</p>
           </div>
-          <TextField
-            label={t("personal_note")}
-            placeholder={t("personal_note_placeholder")}
-            {...form.register("note")}
-            type="text"
-          />
-
+          <div>
+            <TextField
+              label={t("personal_note")}
+              placeholder={t("personal_note_placeholder")}
+              {...form.register("note")}
+              type="text"
+            />
+          </div>
           <div className="flex flex-col">
             <div className="flex justify-between py-2">
               <span className="block text-sm font-medium text-gray-700">{t("expire_date")}</span>
diff --git a/apps/web/pages/event-types/[type].tsx b/apps/web/pages/event-types/[type].tsx
index 164054e890..6fb0b1e833 100644
--- a/apps/web/pages/event-types/[type].tsx
+++ b/apps/web/pages/event-types/[type].tsx
@@ -1888,28 +1888,30 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                     addLocation(newLocation, details);
                     setShowLocationModal(false);
                   }}>
-                  <Controller
-                    name="locationType"
-                    control={locationFormMethods.control}
-                    render={() => (
-                      <Select
-                        maxMenuHeight={100}
-                        name="location"
-                        defaultValue={selectedLocation}
-                        options={locationOptions}
-                        isSearchable={false}
-                        className="  my-4 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 sm:text-sm"
-                        onChange={(val) => {
-                          if (val) {
-                            locationFormMethods.setValue("locationType", val.value);
-                            locationFormMethods.unregister("locationLink");
-                            locationFormMethods.unregister("locationAddress");
-                            setSelectedLocation(val);
-                          }
-                        }}
-                      />
-                    )}
-                  />
+                  <div>
+                    <Controller
+                      name="locationType"
+                      control={locationFormMethods.control}
+                      render={() => (
+                        <Select
+                          maxMenuHeight={100}
+                          name="location"
+                          defaultValue={selectedLocation}
+                          options={locationOptions}
+                          isSearchable={false}
+                          className="  my-4 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 sm:text-sm"
+                          onChange={(val) => {
+                            if (val) {
+                              locationFormMethods.setValue("locationType", val.value);
+                              locationFormMethods.unregister("locationLink");
+                              locationFormMethods.unregister("locationAddress");
+                              setSelectedLocation(val);
+                            }
+                          }}
+                        />
+                      )}
+                    />
+                  </div>
                   <LocationOptions />
                   <div className="mt-4 flex justify-end space-x-2">
                     <Button onClick={() => setShowLocationModal(false)} type="button" color="secondary">