From a0ef2dbc91e8132d066d338939648e78196d727a Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Mon, 26 Mar 2018 11:33:17 -0700
Subject: [PATCH] Add onClickOutside and scrolling to FuncsButton

---
 ui/src/ifql/components/FuncsButton.tsx | 31 +++++++++++++++++++-------
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/ui/src/ifql/components/FuncsButton.tsx b/ui/src/ifql/components/FuncsButton.tsx
index 672a86205..08e609794 100644
--- a/ui/src/ifql/components/FuncsButton.tsx
+++ b/ui/src/ifql/components/FuncsButton.tsx
@@ -1,5 +1,9 @@
 import React, {PureComponent} from 'react'
 
+import FancyScrollbar from 'src/shared/components/FancyScrollbar'
+
+import OnClickOutside from 'src/shared/components/OnClickOutside'
+
 interface State {
   isOpen: boolean
 }
@@ -29,13 +33,19 @@ class FuncsButton extends PureComponent<Props, State> {
         >
           <span className="icon plus" />
         </button>
-        <ul className="dropdown-menu">
-          {isOpen &&
-            funcs.map((func, i) => (
-              <li className="dropdown-item func" data-test="func-item" key={i}>
-                <a>{func}</a>
-              </li>
-            ))}
+        <ul className="dropdown-menu funcs">
+          <FancyScrollbar autoHide={false} autoHeight={true} maxHeight={240}>
+            {isOpen &&
+              funcs.map((func, i) => (
+                <li
+                  className="dropdown-item func"
+                  data-test="func-item"
+                  key={i}
+                >
+                  <a>{func}</a>
+                </li>
+              ))}
+          </FancyScrollbar>
         </ul>
       </div>
     )
@@ -44,6 +54,11 @@ class FuncsButton extends PureComponent<Props, State> {
   private handleClick = () => {
     this.setState({isOpen: !this.state.isOpen})
   }
+
+  // tslint:disable-next-line
+  private handleClickOutside = () => {
+    this.setState({isOpen: false})
+  }
 }
 
-export default FuncsButton
+export default OnClickOutside(FuncsButton)