Piechart: fix unit selector when scrolling is required (#18932)

public/app/core/directives/dropdown_typeahead.ts

@@ -59,6 +59,14 @@ export function dropdownTypeahead($compile: any) {
         []
         []
       );
       );
 
 
+      const closeDropdownMenu = () => {
+        $input.hide();
+        $input.val('');
+        $button.show();
+        $button.focus();
+        elem.removeClass('open');
+      };
+
       $scope.menuItemSelected = (index: number, subIndex: number) => {
       $scope.menuItemSelected = (index: number, subIndex: number) => {
         const menuItem = $scope.menuItems[index];
         const menuItem = $scope.menuItems[index];
         const payload: any = { $item: menuItem };
         const payload: any = { $item: menuItem };
@@ -66,6 +74,7 @@ export function dropdownTypeahead($compile: any) {
           payload.$subItem = menuItem.submenu[subIndex];
           payload.$subItem = menuItem.submenu[subIndex];
         }
         }
         $scope.dropdownTypeaheadOnSelect(payload);
         $scope.dropdownTypeaheadOnSelect(payload);
+        closeDropdownMenu();
       };
       };
 
 
       $input.attr('data-provide', 'typeahead');
       $input.attr('data-provide', 'typeahead');
@@ -105,6 +114,10 @@ export function dropdownTypeahead($compile: any) {
         elem.toggleClass('open', $input.val() === '');
         elem.toggleClass('open', $input.val() === '');
       });
       });
 
 
+      elem.mousedown((evt: Event) => {
+        evt.preventDefault();
+      });
+
       $input.blur(() => {
       $input.blur(() => {
         $input.hide();
         $input.hide();
         $input.val('');
         $input.val('');