From f6d3a5cc9411acf20c9a8a497c993667aa825062 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ida=20=C5=A0tambuk?= <ida.stambuk@grafana.com>
Date: Tue, 6 Jun 2023 10:44:27 +0200
Subject: [PATCH] GrafanaUI: Set default value for QueryField onBlur prop
 (#69487)

---
 .../src/components/QueryField/QueryField.tsx           |  6 ++++++
 .../cloudwatch/components/LogsQueryField.tsx           |  3 ---
 .../SettingsEditor/FiltersSettingsEditor/index.tsx     |  1 -
 .../elasticsearch/components/QueryEditor/index.tsx     | 10 +---------
 .../datasource/jaeger/components/QueryEditor.tsx       |  1 -
 5 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/packages/grafana-ui/src/components/QueryField/QueryField.tsx b/packages/grafana-ui/src/components/QueryField/QueryField.tsx
index ff2f238629f..fe10f7aa94f 100644
--- a/packages/grafana-ui/src/components/QueryField/QueryField.tsx
+++ b/packages/grafana-ui/src/components/QueryField/QueryField.tsx
@@ -241,6 +241,12 @@ export class UnThemedQueryField extends PureComponent<QueryFieldProps, QueryFiel
 
 export const QueryField = withTheme2(UnThemedQueryField);
 
+// By default QueryField calls onChange if onBlur is not defined, this will trigger a rerender
+// And slate will claim the focus, making it impossible to leave the field.
+QueryField.defaultProps = {
+  onBlur: () => {},
+};
+
 const getStyles = (theme: GrafanaTheme2) => {
   const focusStyles = getFocusStyles(theme);
   return {
diff --git a/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx b/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx
index e9845f53076..077a5ca6b8a 100644
--- a/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx
@@ -102,9 +102,6 @@ export const CloudWatchLogsQueryField = (props: CloudWatchLogsQueryFieldProps) =
             cleanText={cleanText}
             placeholder="Enter a CloudWatch Logs Insights query (run with Shift+Enter)"
             portalOrigin="cloudwatch"
-            // By default QueryField calls onChange if onBlur is not defined, this will trigger a rerender
-            // And slate will claim the focus, making it impossible to leave the field.
-            onBlur={() => {}}
           />
         </div>
         {ExtraFieldElement}
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx
index 79c6e7424c7..ef6a38bda57 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx
@@ -59,7 +59,6 @@ export const FiltersSettingsEditor = ({ bucketAgg }: Props) => {
                 <QueryField
                   placeholder="Lucene Query"
                   portalOrigin="elasticsearch"
-                  onBlur={() => {}}
                   onChange={(query) => dispatch(changeFilter({ index, filter: { ...filter, query } }))}
                   query={filter.query}
                 />
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx
index d9030d47b29..cdb72b42017 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx
@@ -82,15 +82,7 @@ export const ElasticSearchQueryField = ({ value, onChange }: { value?: string; o
 
   return (
     <div className={styles.queryItem}>
-      <QueryField
-        query={value}
-        // By default QueryField calls onChange if onBlur is not defined, this will trigger a rerender
-        // And slate will claim the focus, making it impossible to leave the field.
-        onBlur={() => {}}
-        onChange={onChange}
-        placeholder="Enter a lucene query"
-        portalOrigin="elasticsearch"
-      />
+      <QueryField query={value} onChange={onChange} placeholder="Enter a lucene query" portalOrigin="elasticsearch" />
     </div>
   );
 };
diff --git a/public/app/plugins/datasource/jaeger/components/QueryEditor.tsx b/public/app/plugins/datasource/jaeger/components/QueryEditor.tsx
index 0f42aa4cb52..17982b565ad 100644
--- a/public/app/plugins/datasource/jaeger/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/jaeger/components/QueryEditor.tsx
@@ -43,7 +43,6 @@ export function QueryEditor({ datasource, query, onChange, onRunQuery }: Props)
                 query={query.query}
                 onChange={onChangeQuery}
                 onRunQuery={onRunQuery}
-                onBlur={() => {}}
                 placeholder={'Enter a Trace ID (run with Shift+Enter)'}
                 portalOrigin="jaeger"
               />