From 4caea91164bed003b589476e77ceeae64949b568 Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Wed, 6 Feb 2019 13:00:26 +0300
Subject: [PATCH] azuremonitor: fix autocomplete menu height

---
 .../editor/query_field.tsx                           | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/editor/query_field.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/editor/query_field.tsx
index e62337c4982..adab7fc5414 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/editor/query_field.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/editor/query_field.tsx
@@ -105,7 +105,7 @@ class QueryField extends React.Component<any, any> {
     this.setState({ value }, () => {
       if (changed) {
         // call typeahead only if query changed
-        window.requestAnimationFrame(this.onTypeahead);
+        requestAnimationFrame(() => this.onTypeahead());
         this.onChangeQuery();
       }
     });
@@ -283,12 +283,18 @@ class QueryField extends React.Component<any, any> {
       const rect = node.parentElement.getBoundingClientRect();
       const scrollX = window.scrollX;
       const scrollY = window.scrollY;
+      const screenHeight = window.innerHeight;
+
+      const menuLeft = rect.left + scrollX - 2;
+      const menuTop = rect.top + scrollY + rect.height + 4;
+      const menuHeight = screenHeight - menuTop - 10;
 
       // Write DOM
       requestAnimationFrame(() => {
         menu.style.opacity = 1;
-        menu.style.top = `${rect.top + scrollY + rect.height + 4}px`;
-        menu.style.left = `${rect.left + scrollX - 2}px`;
+        menu.style.top = `${menuTop}px`;
+        menu.style.left = `${menuLeft}px`;
+        menu.style.maxHeight = `${menuHeight}px`;
       });
     }
   };