From 8f06aa45ac723c796e50990dc767818f5f2c9393 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Wed, 9 Nov 2022 11:10:33 +0100
Subject: [PATCH] Tempo: Fix dropdown issue on tag field focus (#57616)
 (#57883)

(cherry picked from commit 77be89eb1c743c681d0e070cb5f170e58ffa1bfb)

Co-authored-by: xiyu95 <112968312+xiyu95@users.noreply.github.com>
Co-authored-by: Will Browne <will.browne@grafana.com>
---
 .../tempo/QueryEditor/NativeSearch.tsx        | 29 +++++++++++--------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/public/app/plugins/datasource/tempo/QueryEditor/NativeSearch.tsx b/public/app/plugins/datasource/tempo/QueryEditor/NativeSearch.tsx
index 57ecd300bd2..ce57a91e5d4 100644
--- a/public/app/plugins/datasource/tempo/QueryEditor/NativeSearch.tsx
+++ b/public/app/plugins/datasource/tempo/QueryEditor/NativeSearch.tsx
@@ -125,17 +125,20 @@ const NativeSearch = ({ datasource, query, onChange, onBlur, onRunQuery }: Props
     fetchTags();
   }, [languageProvider]);
 
-  const onTypeahead = async (typeahead: TypeaheadInput): Promise<TypeaheadOutput> => {
-    return await languageProvider.provideCompletionItems(typeahead);
-  };
+  const onTypeahead = useCallback(
+    async (typeahead: TypeaheadInput): Promise<TypeaheadOutput> => {
+      return await languageProvider.provideCompletionItems(typeahead);
+    },
+    [languageProvider]
+  );
 
-  const cleanText = (text: string) => {
+  const cleanText = useCallback((text: string) => {
     const splittedText = text.split(/\s+(?=([^"]*"[^"]*")*[^"]*$)/g);
     if (splittedText.length > 1) {
       return splittedText[splittedText.length - 1];
     }
     return text;
-  };
+  }, []);
 
   const onKeyDown = (keyEvent: React.KeyboardEvent) => {
     if (keyEvent.key === 'Enter' && (keyEvent.shiftKey || keyEvent.ctrlKey)) {
@@ -157,6 +160,13 @@ const NativeSearch = ({ datasource, query, onChange, onBlur, onRunQuery }: Props
     }
   };
 
+  const handleOnChange = useCallback((value) => {
+    onChange({
+      ...query,
+      search: value,
+    });
+  }, []); // eslint-disable-line
+
   const templateSrv: TemplateSrv = getTemplateSrv();
 
   return (
@@ -211,14 +221,9 @@ const NativeSearch = ({ datasource, query, onChange, onBlur, onRunQuery }: Props
               query={query.search}
               onTypeahead={onTypeahead}
               onBlur={onBlur}
-              onChange={(value) => {
-                onChange({
-                  ...query,
-                  search: value,
-                });
-              }}
-              placeholder="http.status_code=200 error=true"
+              onChange={handleOnChange}
               cleanText={cleanText}
+              placeholder="http.status_code=200 error=true"
               onRunQuery={onRunQuery}
               syntaxLoaded={hasSyntaxLoaded}
               portalOrigin="tempo"