From 95409f53d26cfa6173286d80bc6b97573c145aba Mon Sep 17 00:00:00 2001
From: Marcus Andersson <marcus.andersson@grafana.com>
Date: Thu, 22 Aug 2024 17:16:48 +0200
Subject: [PATCH] Bugfix: QueryField typeahead missing background color
 (#92216)

Added missing styles to the typeahead menu.
---
 .../src/components/Typeahead/Typeahead.tsx       | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/components/Typeahead/Typeahead.tsx b/packages/grafana-ui/src/components/Typeahead/Typeahead.tsx
index 9f1a7dc44bf..3b20190fa3e 100644
--- a/packages/grafana-ui/src/components/Typeahead/Typeahead.tsx
+++ b/packages/grafana-ui/src/components/Typeahead/Typeahead.tsx
@@ -221,7 +221,7 @@ class Portal extends PureComponent<React.PropsWithChildren<PortalProps>, {}> {
     const { index = 0, origin = 'query', style } = props;
     this.node = document.createElement('div');
     this.node.setAttribute('style', style);
-    this.node.classList.add(`slate-typeahead`, `slate-typeahead-${origin}-${index}`);
+    this.node.classList.add(`slate-typeahead-${origin}-${index}`);
     document.body.appendChild(this.node);
   }
 
@@ -244,8 +244,18 @@ class Portal extends PureComponent<React.PropsWithChildren<PortalProps>, {}> {
 
 const getStyles = (theme: GrafanaTheme2) => ({
   typeahead: css({
-    maxHeight: 300,
-    overflowY: 'auto',
+    position: 'relative',
+    zIndex: theme.zIndex.typeahead,
+    borderRadius: theme.shape.radius.default,
+    border: `1px solid ${theme.components.panel.borderColor}`,
+    maxHeight: '66vh',
+    overflowY: 'scroll',
+    overflowX: 'hidden',
+    outline: 'none',
+    listStyle: 'none',
+    background: theme.components.panel.background,
+    color: theme.colors.text.primary,
+    boxShadow: theme.shadows.z2,
 
     strong: {
       color: theme.v1.palette.yellow,