From 3363e3f2d35a6da3474151febe26c50c3746956f Mon Sep 17 00:00:00 2001
From: Josh Hunt <joshhunt@users.noreply.github.com>
Date: Wed, 28 Feb 2024 16:47:10 +0000
Subject: [PATCH] CodeEditor: Ensure latest onChange callback is called
 (#83599)

---
 .../src/components/Monaco/CodeEditor.tsx           | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx b/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx
index 7ab4854ec2c..fa3ea3d7e18 100644
--- a/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx
+++ b/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx
@@ -102,7 +102,7 @@ class UnthemedCodeEditor extends PureComponent<Props> {
   };
 
   handleOnMount = (editor: MonacoEditorType, monaco: Monaco) => {
-    const { getSuggestions, language, onChange, onEditorDidMount } = this.props;
+    const { getSuggestions, language, onEditorDidMount } = this.props;
 
     this.modelId = editor.getModel()?.id;
     this.getEditorValue = () => editor.getValue();
@@ -119,15 +119,21 @@ class UnthemedCodeEditor extends PureComponent<Props> {
       }
     });
 
-    if (onChange) {
-      editor.getModel()?.onDidChangeContent(() => onChange(editor.getValue()));
-    }
+    editor.getModel()?.onDidChangeContent(this.handleChangeContent);
 
     if (onEditorDidMount) {
       onEditorDidMount(editor, monaco);
     }
   };
 
+  handleChangeContent = () => {
+    const { onChange } = this.props;
+
+    if (onChange) {
+      onChange(this.getEditorValue());
+    }
+  };
+
   render() {
     const { theme, language, width, height, showMiniMap, showLineNumbers, readOnly, monacoOptions } = this.props;
     const { alwaysConsumeMouseWheel, ...restMonacoOptions } = monacoOptions ?? {};