diff --git a/packages/grafana-ui/src/components/Typeahead/PartialHighlighter.test.tsx b/packages/grafana-ui/src/components/Typeahead/PartialHighlighter.test.tsx
index 1ee7c4a4281..55008a6cf46 100644
--- a/packages/grafana-ui/src/components/Typeahead/PartialHighlighter.test.tsx
+++ b/packages/grafana-ui/src/components/Typeahead/PartialHighlighter.test.tsx
@@ -45,4 +45,11 @@ describe('PartialHighlighter component', () => {
     assertPart(main.childAt(1), false, ' ipsum dolor sit ');
     assertPart(main.childAt(2), true, 'amet');
   });
+
+  it('returns null if highlightParts is empty', () => {
+    const component = mount(
+      <PartialHighlighter text="Lorem ipsum dolor sit amet" highlightClassName="highlight" highlightParts={[]} />
+    );
+    expect(component.html()).toBe(null);
+  });
 });
diff --git a/packages/grafana-ui/src/components/Typeahead/PartialHighlighter.tsx b/packages/grafana-ui/src/components/Typeahead/PartialHighlighter.tsx
index c97b86b96ea..bcd095dd076 100644
--- a/packages/grafana-ui/src/components/Typeahead/PartialHighlighter.tsx
+++ b/packages/grafana-ui/src/components/Typeahead/PartialHighlighter.tsx
@@ -29,7 +29,7 @@ function getStartIndices(parts: HighlightPart[], length: number): number[] {
 export const PartialHighlighter: React.FC<Props> = (props: Props) => {
   let { highlightParts, text, highlightClassName } = props;
 
-  if (!highlightParts) {
+  if (!highlightParts?.length) {
     return null;
   }