[v11.1.x] Bugfix: QueryField typeahead missing background color (graf…

…ana#92316) Bugfix: QueryField typeahead missing background color (grafana#92216) Added missing styles to the typeahead menu. (cherry picked from commit 95409f5) Co-authored-by: Marcus Andersson <[email protected]>
percona · Aug 22, 2024 · 9731d7c · 9731d7c
1 parent 09ed236
commit 9731d7c
Showing 1 changed file with 13 additions and 3 deletions.
diff --git a/packages/grafana-ui/src/components/Typeahead/Typeahead.tsx b/packages/grafana-ui/src/components/Typeahead/Typeahead.tsx
@@ -220,7 +220,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);
   }
 
@@ -243,8 +243,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,