From f4bb26d0efc7e6e375b8d67fad6d3a0da00bd584 Mon Sep 17 00:00:00 2001
From: Elena Stoeva <59341489+ElenaStoeva@users.noreply.github.com>
Date: Tue, 5 Mar 2024 12:02:40 +0000
Subject: [PATCH] [Advanced Settings] Fix code editor field (#177772)

Fixes https://github.com/elastic/kibana/issues/177600

## Summary

This PR fixes the incorrect behaviour described in
https://github.com/elastic/kibana/issues/177600, which seems to be
caused because the `onChange` handler of the code editor component is
redundantly called with the current value when the "Reset to default"
link or the "Save" button is clicked. This fix adds a check for whether
the value passed to the `onChange` is different from the current value
and only then it would update the field.
---
 .../field_input/input/code_editor_input.tsx         | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/kbn-management/settings/components/field_input/input/code_editor_input.tsx b/packages/kbn-management/settings/components/field_input/input/code_editor_input.tsx
index 101ac8897bb28..295425006d8ca 100644
--- a/packages/kbn-management/settings/components/field_input/input/code_editor_input.tsx
+++ b/packages/kbn-management/settings/components/field_input/input/code_editor_input.tsx
@@ -90,14 +90,17 @@ export const CodeEditorInput = ({
   );
 
   const debouncedUpdateValue = useMemo(() => {
-    // Trigger update 1000 ms after the user stopped typing to reduce validation requests to the server
-    return debounce(updateValue, 1000);
+    // Trigger update 500 ms after the user stopped typing to reduce validation requests to the server
+    return debounce(updateValue, 500);
   }, [updateValue]);
 
   const onChange: CodeEditorProps['onChange'] = async (newValue) => {
-    // @ts-expect-error
-    setValue(newValue);
-    await debouncedUpdateValue(newValue, onUpdate);
+    // Only update the value when the onChange handler is called with a different value from the current one
+    if (newValue !== value) {
+      // @ts-expect-error
+      setValue(newValue);
+      await debouncedUpdateValue(newValue, onUpdate);
+    }
   };
 
   useEffect(() => {