Tempo: Fix dropdown issue on tag field focus (#57616) (#57883)

(cherry picked from commit 77be89eb1c)

Co-authored-by: xiyu95 <112968312+xiyu95@users.noreply.github.com>
Co-authored-by: Will Browne <will.browne@grafana.com>

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"