From d743f1e74c30e7b9f73646cc71165d04ffce3c06 Mon Sep 17 00:00:00 2001
From: Jean-Louis Leysens <jloleysens@gmail.com>
Date: Mon, 1 Feb 2021 18:26:30 +0100
Subject: [PATCH] added callback for listening to field onerror events

---
 .../forms/hook_form_lib/components/use_field.tsx     |  4 +++-
 .../static/forms/hook_form_lib/hooks/use_field.ts    | 12 +++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/plugins/es_ui_shared/static/forms/hook_form_lib/components/use_field.tsx b/src/plugins/es_ui_shared/static/forms/hook_form_lib/components/use_field.tsx
index 94c2bc42d2855..cc79ed24b5d0c 100644
--- a/src/plugins/es_ui_shared/static/forms/hook_form_lib/components/use_field.tsx
+++ b/src/plugins/es_ui_shared/static/forms/hook_form_lib/components/use_field.tsx
@@ -20,6 +20,7 @@ export interface Props<T, FormType = FormData, I = T> {
   componentProps?: Record<string, any>;
   readDefaultValueOnForm?: boolean;
   onChange?: (value: I) => void;
+  onError?: (errors: string[] | null) => void;
   children?: (field: FieldHook<T, I>) => JSX.Element | null;
   [key: string]: any;
 }
@@ -33,6 +34,7 @@ function UseFieldComp<T = unknown, FormType = FormData, I = T>(props: Props<T, F
     componentProps,
     readDefaultValueOnForm = true,
     onChange,
+    onError,
     children,
     ...rest
   } = props;
@@ -62,7 +64,7 @@ function UseFieldComp<T = unknown, FormType = FormData, I = T>(props: Props<T, F
     }
   }
 
-  const field = useField<T, FormType, I>(form, path, fieldConfig, onChange);
+  const field = useField<T, FormType, I>(form, path, fieldConfig, onChange, onError);
 
   // Children prevails over anything else provided.
   if (children) {
diff --git a/src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_field.ts b/src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_field.ts
index c396f223e97fd..db7b0b2820a47 100644
--- a/src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_field.ts
+++ b/src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_field.ts
@@ -27,7 +27,8 @@ export const useField = <T, FormType = FormData, I = T>(
   form: FormHook<FormType>,
   path: string,
   config: FieldConfig<T, FormType, I> & InternalFieldConfig<T> = {},
-  valueChangeListener?: (value: I) => void
+  valueChangeListener?: (value: I) => void,
+  errorChangeListener?: (errors: string[] | null) => void
 ) => {
   const {
     type = FIELD_TYPES.TEXT,
@@ -596,6 +597,15 @@ export const useField = <T, FormType = FormData, I = T>(
     };
   }, [onValueChange]);
 
+  useEffect(() => {
+    if (!isMounted.current) {
+      return;
+    }
+    if (errorChangeListener) {
+      errorChangeListener(errors.length ? errors.map((error) => error.message) : null);
+    }
+  }, [errors, errorChangeListener]);
+
   useEffect(() => {
     isMounted.current = true;