fix(ui): objecteditor only runs onChange when values are modified (#4911

) Signed-off-by: Tianchu Zhao <evantczhao@gmail.com>
argoproj · Jan 20, 2021 · cd7c16b · cd7c16b
1 parent 8c353d9
commit cd7c16b
Showing 1 changed file with 12 additions and 8 deletions.
diff --git a/ui/src/app/shared/components/object-editor/object-editor.tsx b/ui/src/app/shared/components/object-editor/object-editor.tsx
@@ -26,15 +26,18 @@ export const ObjectEditor = <T extends any>({type, value, buttons, onChange}: Pr
     useEffect(() => storage.setItem('lang', lang, defaultLang), [lang]);
     useEffect(() => setText(stringify(value, lang)), [value]);
     useEffect(() => setText(stringify(parse(text), lang)), [lang]);
-    if (onChange) {
-        useEffect(() => {
-            try {
-                onChange(parse(text));
-            } catch (e) {
-                setError(e);
+    const updateText = (newValue: string) => {
+        if (onChange) {
+            {
+                setText(newValue);
+                try {
+                    onChange(parse(newValue));
+                } catch (e) {
+                    setError(e);
+                }
             }
-        }, [text]);
-    }
+        }
+    };
 
     useEffect(() => {
         if (type && lang === 'json') {
@@ -88,6 +91,7 @@ export const ObjectEditor = <T extends any>({type, value, buttons, onChange}: Pr
                         renderIndentGuides: false,
                         scrollBeyondLastLine: true
                     }}
+                    onChange={newValue => updateText(newValue)}
                 />
             </div>
             <div style={{paddingTop: '1em'}}>