useForm(): Reset "isSubmitted" state when adding new fields

elastic · Aug 31, 2020 · 6bd2b24 · 6bd2b24
1 parent 12d0281
commit 6bd2b24
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form.ts b/src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form.ts
@@ -240,6 +240,12 @@ export function useForm<T extends FormData = FormData>(
 
       if (!field.isValidated) {
         setIsValid(undefined);
+
+        // When we submit the form (and set "isSubmitted" to "true"), we validate **all fields**.
+        // If a field is added and it is not validated it means that we have swapped fields and added new ones:
+        // --> we have basically have a new form in front of us.
+        // For that reason we make sure that the "isSubmitted" state is false.
+        setIsSubmitted(false);
       }
     },
     [updateFormDataAt]

diff --git a/...on/components/mappings_editor/components/document_fields/fields/edit_field/edit_field.tsx b/...on/components/mappings_editor/components/document_fields/fields/edit_field/edit_field.tsx
@@ -163,7 +163,7 @@ export const EditField = React.memo(({ form, field, allFields, exitEdit, updateF
       </EuiFlyoutBody>
 
       <EuiFlyoutFooter>
-        {form.isSubmitted && form.isValid === false && (
+        {form.isSubmitted && !form.isValid && (
           <>
             <EuiCallOut
               title={i18n.translate(
@@ -193,7 +193,7 @@ export const EditField = React.memo(({ form, field, allFields, exitEdit, updateF
               fill
               onClick={submitForm}
               type="submit"
-              disabled={form.isSubmitted && form.isValid === false}
+              disabled={form.isSubmitted && !form.isValid}
               data-test-subj="editFieldUpdateButton"
             >
               {i18n.translate('xpack.idxMgmt.mappingsEditor.editFieldUpdateButtonLabel', {