diff --git a/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx b/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx
index fa3ea3d7e18..7ab4854ec2c 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, onEditorDidMount } = this.props;
+    const { getSuggestions, language, onChange, onEditorDidMount } = this.props;
 
     this.modelId = editor.getModel()?.id;
     this.getEditorValue = () => editor.getValue();
@@ -119,21 +119,15 @@ class UnthemedCodeEditor extends PureComponent<Props> {
       }
     });
 
-    editor.getModel()?.onDidChangeContent(this.handleChangeContent);
+    if (onChange) {
+      editor.getModel()?.onDidChangeContent(() => onChange(editor.getValue()));
+    }
 
     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 ?? {};