graph: fixes click after scroll in series override menu

Makes changes to dropdown-typeahead2 so that a css
class for the button can be passed in. Means it can
be used instead of dropdown-typeahead.

Switches to using dropdown-typeahead2 for series_overrides
directive and for the influxdb, mysql and postgres datasources
as it already contains a fix for this issue.

This commit also fixes the index property which
was set using an incorrectly spelled length property in the
series_overrides directive.

Closes #15621

public/app/core/directives/dropdown_typeahead.ts

@@ -128,7 +128,7 @@ export function dropdownTypeahead2($compile) {
     '<input type="text"' + ' class="gf-form-input"' + ' spellcheck="false" style="display:none"></input>';
 
   const buttonTemplate =
-    '<a class="gf-form-input dropdown-toggle"' +
+    '<a class="{{buttonTemplateClass}} dropdown-toggle"' +
     ' tabindex="1" gf-dropdown="menuItems" data-toggle="dropdown"' +
     ' ><i class="fa fa-plus"></i></a>';
 
@@ -137,9 +137,15 @@ export function dropdownTypeahead2($compile) {
       menuItems: '=dropdownTypeahead2',
       dropdownTypeaheadOnSelect: '&dropdownTypeaheadOnSelect',
       model: '=ngModel',
+      buttonTemplateClass: '@',
     },
     link: ($scope, elem, attrs) => {
       const $input = $(inputTemplate);
+
+      if (!$scope.buttonTemplateClass) {
+        $scope.buttonTemplateClass = 'gf-form-input';
+      }
+
       const $button = $(buttonTemplate);
       const timeoutId = {
         blur: null,

public/app/plugins/datasource/mysql/partials/query.editor.html

@@ -45,8 +45,10 @@
 
       <div class="gf-form">
         <label class="dropdown"
-                dropdown-typeahead="ctrl.selectMenu"
-                dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)">
+                dropdown-typeahead2="ctrl.selectMenu"
+                dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)"
+                button-template-class="gf-form-label query-part"
+                >
         </label>
       </div>
 

public/app/plugins/datasource/postgres/partials/query.editor.html

@@ -45,8 +45,10 @@
 
       <div class="gf-form">
         <label class="dropdown"
-                dropdown-typeahead="ctrl.selectMenu"
-                dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)">
+                dropdown-typeahead2="ctrl.selectMenu"
+                dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)"
+                button-template-class="gf-form-label query-part"
+                >
         </label>
       </div>
 

public/app/plugins/panel/graph/series_overrides_ctrl.ts

@@ -11,7 +11,7 @@ export function SeriesOverridesCtrl($scope, $element, popoverSrv) {
     const option = {
       text: name,
       propertyName: propertyName,
-      index: $scope.overrideMenu.lenght,
+      index: $scope.overrideMenu.length,
       values: values,
       submenu: _.map(values, value => {
         return { text: String(value), value: value };