diff --git a/public/app/plugins/datasource/tempo/QueryEditor/NativeSearch.tsx b/public/app/plugins/datasource/tempo/QueryEditor/NativeSearch.tsx
index 6f9a1d596fb..ffddb9ded88 100644
--- a/public/app/plugins/datasource/tempo/QueryEditor/NativeSearch.tsx
+++ b/public/app/plugins/datasource/tempo/QueryEditor/NativeSearch.tsx
@@ -142,6 +142,20 @@ 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 templateSrv: TemplateSrv = getTemplateSrv();
 
   return (
@@ -180,13 +194,7 @@ const NativeSearch = ({ datasource, query, onChange, onBlur, onRunQuery }: Props
                 loadOptions('spanName');
               }}
               isLoading={isLoading.spanName}
-              value={spanOptions?.find((v) => v?.value === query.spanName) || undefined}
-              onChange={(v) => {
-                onChange({
-                  ...query,
-                  spanName: v?.value || undefined,
-                });
-              }}
+              onChange={onSpanNameChange}
               placeholder="Select a span"
               isClearable
               onKeyDown={onKeyDown}