From d9e918a4e0ad86ed88deff6fdec76a6823f9ab50 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel12@gmail.com>
Date: Thu, 28 Jan 2021 14:16:11 -0500
Subject: [PATCH] use watch on initial form field

---
 src/realm-roles/RoleAttributes.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/realm-roles/RoleAttributes.tsx b/src/realm-roles/RoleAttributes.tsx
index a05ef7068d..226e39ff6f 100644
--- a/src/realm-roles/RoleAttributes.tsx
+++ b/src/realm-roles/RoleAttributes.tsx
@@ -34,7 +34,7 @@ type RoleAttributesProps = {
 };
 
 export const RoleAttributes = ({
-  form: { handleSubmit, register, formState, errors },
+  form: { handleSubmit, register, formState, errors, watch },
   save,
   array: { fields, append, remove },
   reset,
@@ -42,6 +42,7 @@ export const RoleAttributes = ({
   const { t } = useTranslation("roles");
 
   const columns = ["Key", "Value"];
+  const watchFirstKey = watch("attributes[0].key");
 
   return (
     <>
@@ -141,11 +142,7 @@ export const RoleAttributes = ({
           </Tbody>
         </TableComposable>
         <ActionGroup className="kc-role-attributes__action-group">
-          <Button
-            variant="primary"
-            type="submit"
-            isDisabled={!formState.isValid}
-          >
+          <Button variant="primary" type="submit" isDisabled={!watchFirstKey}>
             {t("common:save")}
           </Button>
           <Button onClick={reset} variant="link">