Bugfix: QueryField typeahead missing background color (grafana#92216)

Added missing styles to the typeahead menu.
xingjl86 · Aug 22, 2024 · 95409f5 · 95409f5
1 parent 9fbfaf0
commit 95409f5
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
@@ -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,