From 6bd2b24f8b3df9b586c42bad9a4d3b4d15d8d93b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81bastien=20Loix?= <sabee77@gmail.com>
Date: Mon, 31 Aug 2020 10:22:32 +0200
Subject: [PATCH] useForm(): Reset "isSubmitted" state when adding new fields

---
 .../static/forms/hook_form_lib/hooks/use_form.ts            | 6 ++++++
 .../document_fields/fields/edit_field/edit_field.tsx        | 4 ++--
 2 files changed, 8 insertions(+), 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
index 54c59bd171686..7b72a9eeacf7b 100644
--- 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/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field.tsx
index 6b5a848ce85d3..95575124b6abd 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field.tsx
+++ b/x-pack/plugins/index_management/public/application/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', {