Fix JsonEditor: don't use hook state when component is controlled

elastic · Sep 3, 2020 · 16a8514 · 16a8514
1 parent 438d9f2
commit 16a8514
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/src/plugins/es_ui_shared/public/components/json_editor/json_editor.tsx b/src/plugins/es_ui_shared/public/components/json_editor/json_editor.tsx
@@ -58,12 +58,26 @@ function JsonEditorComp<T extends object = { [key: string]: any }>({
   const onEuiCodeEditorChange = useCallback(
     (updated: string) => {
       if (isControlled) {
-        setContent(updated);
+        onUpdate({
+          data: {
+            raw: updated,
+            format: () => JSON.parse(updated),
+          },
+          validate: () => {
+            try {
+              JSON.parse(updated);
+              return true;
+            } catch (e) {
+              return false;
+            }
+          },
+          isValid: undefined,
+        });
       } else {
         debouncedSetContent(updated);
       }
     },
-    [isControlled, setContent, debouncedSetContent]
+    [isControlled, debouncedSetContent, onUpdate]
   );
 
   return (

diff --git a/src/plugins/es_ui_shared/public/components/json_editor/use_json.ts b/src/plugins/es_ui_shared/public/components/json_editor/use_json.ts
@@ -28,7 +28,7 @@ export interface JsonEditorState<T = { [key: string]: any }> {
     format(): T;
   };
   validate(): boolean;
-  isValid: boolean;
+  isValid: boolean | undefined;
 }
 
 export type OnJsonEditorUpdateHandler<T = { [key: string]: any }> = (
@@ -78,7 +78,7 @@ export const useJson = <T extends object = { [key: string]: any }>({
   }, [validate, content]);
 
   useEffect(() => {
-    if (!isMounted.current) {
+    if (!isMounted.current || isControlled) {
       return;
     }
 
@@ -92,7 +92,7 @@ export const useJson = <T extends object = { [key: string]: any }>({
       validate,
       isValid,
     });
-  }, [onUpdate, content, formatContent, validate]);
+  }, [onUpdate, content, formatContent, validate, isControlled]);
 
   useEffect(() => {
     isMounted.current = true;