diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryCodeEditor.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryCodeEditor.tsx
index 1354458a7ac..2ea26ae1f60 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryCodeEditor.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryCodeEditor.tsx
@@ -1,16 +1,33 @@
 import { css } from '@emotion/css';
 import React from 'react';
 
-import { GrafanaTheme2 } from '@grafana/data';
+import { CoreApp, GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
 
 import { testIds } from '../../components/LokiQueryEditor';
 import { LokiQueryField } from '../../components/LokiQueryField';
 import { LokiQueryEditorProps } from '../../components/types';
 
-export function LokiQueryCodeEditor({ query, datasource, range, onRunQuery, onChange, data }: LokiQueryEditorProps) {
+export function LokiQueryCodeEditor({
+  query,
+  datasource,
+  range,
+  onRunQuery,
+  onChange,
+  data,
+  app,
+}: LokiQueryEditorProps) {
   const styles = useStyles2(getStyles);
 
+  // the inner QueryField works like this when a blur event happens:
+  // - if it has an onBlur prop, it calls it
+  // - else it calls onRunQuery (some extra conditions apply)
+  //
+  // we want it to not do anything when a blur event happens in explore mode,
+  // so we set an empty-function in such case. otherwise we set `undefined`,
+  // which will cause it to run the query when blur happens.
+  const onBlur = app === CoreApp.Explore ? () => undefined : undefined;
+
   return (
     <div className={styles.wrapper}>
       <LokiQueryField
@@ -19,6 +36,7 @@ export function LokiQueryCodeEditor({ query, datasource, range, onRunQuery, onCh
         range={range}
         onRunQuery={onRunQuery}
         onChange={onChange}
+        onBlur={onBlur}
         history={[]}
         data={data}
         data-testid={testIds.editor}
diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx
index fbb5f1d4f82..3d264ea554d 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx
@@ -111,7 +111,7 @@ export const LokiQueryEditorSelector = React.memo<LokiQueryEditorProps>((props)
       </EditorHeader>
       <Space v={0.5} />
       <EditorRows>
-        {editorMode === QueryEditorMode.Code && <LokiQueryCodeEditor {...props} />}
+        {editorMode === QueryEditorMode.Code && <LokiQueryCodeEditor {...props} onChange={onChangeInternal} />}
         {editorMode === QueryEditorMode.Builder && (
           <LokiQueryBuilderContainer
             datasource={props.datasource}