From 71f7f534ff3e0b6b6a9e8a59c41543cd2ceb9354 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Tue, 31 Jan 2023 14:30:42 +0000
Subject: [PATCH] [v9.2.x] Tempo: Fix span name being dropped from the query
 (#62591)

Tempo: Fix span name being dropped from the query (#62257)
(cherry picked from commit c3b476e1dcb310e1d3b425f058264ed5be00d1d8)
Co-authored-by: Hamas Shafiq <hamas.shafiq@grafana.com>
---
 .../tempo/QueryEditor/NativeSearch.tsx        | 26 +++++++------------
 1 file changed, 9 insertions(+), 17 deletions(-)

diff --git a/public/app/plugins/datasource/tempo/QueryEditor/NativeSearch.tsx b/public/app/plugins/datasource/tempo/QueryEditor/NativeSearch.tsx
index de519bb8782..a1bf8205ab9 100644
--- a/public/app/plugins/datasource/tempo/QueryEditor/NativeSearch.tsx
+++ b/public/app/plugins/datasource/tempo/QueryEditor/NativeSearch.tsx
@@ -146,20 +146,6 @@ const NativeSearch = ({ datasource, query, onChange, onBlur, onRunQuery }: Props
     }
   };
 
-  const onSpanNameChange = (v: SelectableValue<string>) => {
-    // If the 'x' icon is clicked to clear the selected span name, remove spanName from the query object.
-    if (!v) {
-      delete query.spanName;
-      return;
-    }
-    if (spanOptions?.find((obj) => obj.value === v.value)) {
-      onChange({
-        ...query,
-        spanName: v.value,
-      });
-    }
-  };
-
   const handleOnChange = useCallback(
     (value) => {
       onChange({
@@ -184,11 +170,11 @@ const NativeSearch = ({ datasource, query, onChange, onBlur, onRunQuery }: Props
                 loadOptions('serviceName');
               }}
               isLoading={isLoading.serviceName}
-              value={serviceOptions?.find((v) => v?.value === query.serviceName) || undefined}
+              value={serviceOptions?.find((v) => v?.value === query.serviceName) || query.serviceName}
               onChange={(v) => {
                 onChange({
                   ...query,
-                  serviceName: v?.value || undefined,
+                  serviceName: v?.value,
                 });
               }}
               placeholder="Select a service"
@@ -208,7 +194,13 @@ const NativeSearch = ({ datasource, query, onChange, onBlur, onRunQuery }: Props
                 loadOptions('spanName');
               }}
               isLoading={isLoading.spanName}
-              onChange={onSpanNameChange}
+              value={spanOptions?.find((v) => v?.value === query.spanName) || query.spanName}
+              onChange={(v) => {
+                onChange({
+                  ...query,
+                  spanName: v?.value,
+                });
+              }}
               placeholder="Select a span"
               isClearable
               onKeyDown={onKeyDown}