fix: graphite func editor fixes, this component is messy and ugly as hell

public/app/plugins/datasource/graphite/add_graphite_func.js

-define([
-  'angular',
-  'lodash',
-  'jquery',
-  'rst2html',
-  'tether-drop',
-],
-function (angular, _, $, rst2html, Drop) {
+define(['angular', 'lodash', 'jquery', 'rst2html', 'tether-drop'], function(angular, _, $, rst2html, Drop) {
   'use strict';
 
-  angular
-    .module('grafana.directives')
-  .directive('graphiteAddFunc', function($compile) {
-      var inputTemplate = '<input type="text"'+
-                            ' class="gf-form-input"' +
-                            ' spellcheck="false" style="display:none"></input>';
+  angular.module('grafana.directives').directive('graphiteAddFunc', function($compile) {
+    var inputTemplate =
+      '<input type="text"' + ' class="gf-form-input"' + ' spellcheck="false" style="display:none"></input>';
 
-      var buttonTemplate = '<a class="gf-form-label query-part dropdown-toggle"' +
+    var buttonTemplate =
+      '<a class="gf-form-label query-part dropdown-toggle"' +
       ' tabindex="1" gf-dropdown="functionMenu" data-toggle="dropdown">' +
       '<i class="fa fa-plus"></i></a>';
 
@@ -39,7 +30,7 @@ function (angular, _, $, rst2html, Drop) {
             source: allFunctions,
             minLength: 1,
             items: 10,
-              updater: function (value) {
+            updater: function(value) {
               var funcDef = ctrl.datasource.getFuncDef(value);
               if (!funcDef) {
                 // try find close match
@@ -48,7 +39,9 @@ function (angular, _, $, rst2html, Drop) {
                   return funcName.toLowerCase().indexOf(value) === 0;
                 });
 
-                  if (!funcDef) { return; }
+                if (!funcDef) {
+                  return;
+                }
               }
 
               $scope.$apply(function() {
@@ -57,7 +50,7 @@ function (angular, _, $, rst2html, Drop) {
 
               $input.trigger('blur');
               return '';
-              }
+            },
           });
 
           $button.click(function() {
@@ -84,13 +77,17 @@ function (angular, _, $, rst2html, Drop) {
           $compile(elem.contents())($scope);
         });
 
-          var drops = [];
+        var drop;
+        var cleanUpDrop = function() {
+          if (drop) {
+            drop.destroy();
+            drop = null;
+          }
+        };
 
         $(elem)
-            .on('mouseenter', 'ul.dropdown-menu li', function () {
-              while (drops.length > 0) {
-                drops.pop().remove();
-              }
+          .on('mouseenter', 'ul.dropdown-menu li', function() {
+            cleanUpDrop();
 
             var funcDef;
             try {
@@ -108,7 +105,7 @@ function (angular, _, $, rst2html, Drop) {
               var contentElement = document.createElement('div');
               contentElement.innerHTML = '<h4>' + funcDef.name + '</h4>' + rst2html(shortDesc);
 
-                var drop = new Drop({
+              drop = new Drop({
                 target: this,
                 content: contentElement,
                 classes: 'drop-popover',
@@ -118,18 +115,14 @@ function (angular, _, $, rst2html, Drop) {
                   targetAttachment: 'bottom right',
                 },
               });
-
-                drops.push(drop);
-
-                drop.open();
             }
           })
           .on('mouseout', 'ul.dropdown-menu li', function() {
-              while (drops.length > 0) {
-                drops.pop().remove();
-              }
+            cleanUpDrop();
           });
-        }
+
+        $scope.$on('$destroy', cleanUpDrop);
+      },
     };
   });
 
@@ -149,11 +142,14 @@ function (angular, _, $, rst2html, Drop) {
       });
     });
 
-    return _.sortBy(_.map(categories, function(submenu, category) {
+    return _.sortBy(
+      _.map(categories, function(submenu, category) {
         return {
           text: category,
-        submenu: _.sortBy(submenu, 'text')
+          submenu: _.sortBy(submenu, 'text'),
         };
-    }), 'text');
+      }),
+      'text'
+    );
   }
 });

public/app/plugins/datasource/graphite/func_editor.js

@@ -32,6 +32,7 @@ function (angular, _, $, rst2html) {
           var func = $scope.func;
           var scheduledRelink = false;
           var paramCountAtLink = 0;
+          var cancelBlur = null;
 
           function clickFuncParam(paramIndex) {
             /*jshint validthis:true */
@@ -79,21 +80,23 @@ function (angular, _, $, rst2html) {
             return {};
           }
 
-          function inputBlur(paramIndex) {
+          function switchToLink(inputElem, paramIndex) {
             /*jshint validthis:true */
-            var $input = $(this);
-            if ($input.data('typeahead') && $input.data('typeahead').shown) {
-              return;
-            }
+            var $input = $(inputElem);
+
+            clearTimeout(cancelBlur);
+            cancelBlur = null;
 
             var $link = $input.prev();
             var $comma = $link.prev('.comma');
             var newValue = $input.val();
 
+            // remove optional empty params
             if (newValue !== '' || paramDef(paramIndex).optional) {
-              $link.html(templateSrv.highlightVariablesAsHtml(newValue));
-
               func.updateParam(newValue, paramIndex);
+            }
+
+            $link.html(templateSrv.highlightVariablesAsHtml(newValue));
             scheduledRelinkIfNeeded();
 
             $scope.$apply(function() {
@@ -105,15 +108,26 @@ function (angular, _, $, rst2html) {
             } else {
               $link.removeClass('last');
             }
+
             $input.hide();
             $link.show();
           }
+
+          // this = input element
+          function inputBlur(paramIndex) {
+            /*jshint validthis:true */
+            var inputElem = this;
+            // happens long before the click event on the typeahead options
+            // need to have long delay because the blur
+            cancelBlur = setTimeout(function() {
+              switchToLink(inputElem, paramIndex);
+            }, 200);
           }
 
           function inputKeyPress(paramIndex, e) {
             /*jshint validthis:true */
             if(e.which === 13) {
-              inputBlur.call(this, paramIndex);
+              $(this).blur();
             }
           }
 
@@ -135,9 +149,8 @@ function (angular, _, $, rst2html) {
               minLength: 0,
               items: 20,
               updater: function (value) {
-                setTimeout(function() {
-                  inputBlur.call($input[0], paramIndex);
-                }, 0);
+                $input.val(value);
+                switchToLink($input[0], paramIndex);
                 return value;
               }
             });