Removed selection state for single select variables

public/app/directives/variableValueSelect.js

@@ -11,20 +11,8 @@ function (angular, app, _) {
     .module('grafana.directives')
     .directive('variableValueSelect', function($compile, $window, $timeout) {
 
-      function openDropdown(inputEl, linkEl) {
-        inputEl.css('width', (linkEl.width() + 16) + 'px');
-
-        linkEl.hide();
-        inputEl.show();
-        inputEl.focus();
-      };
-
       return {
-        scope: {
-          variable: "=",
-          onUpdated: "&"
-        },
-
+        scope: { variable: "=", onUpdated: "&" },
         templateUrl: 'app/features/dashboard/partials/variableValueSelect.html',
 
         link: function(scope, elem) {
@@ -94,6 +82,7 @@ function (angular, app, _) {
 
             scope.search = {query: '', options: scope.options};
             scope.selectedValuesCount = currentValues.length;
+            scope.selectedTags = scope.selectedTag || [];
 
             if (!scope.tags) {
               scope.tags = _.map(variable.tags, function(value) {

public/app/features/dashboard/partials/variableValueSelect.html

@@ -2,7 +2,7 @@
 	{{labelText}}:
 </span>
 
-<div style="position: relative; display: inline-block">
+<div class="variable-link-wrapper">
 	<a ng-click="show()" class="variable-value-link tight-form-item">
 		{{linkText}}
 		<span class="label-tag" ng-repeat="tag in selectedTags" tag-color-from-name="tag.text">
@@ -11,6 +11,7 @@
 		</span>
 		<i class="fa fa-caret-down"></i>
 	</a>
+
 	<input type="text" class="tight-form-clear-input input-small" style="display: none" ng-keydown="keyDown($event)" ng-model="search.query" ng-change="queryChanged()" ></input>
 
 	<div class="variable-value-dropdown" ng-if="dropdownVisible">
@@ -19,12 +20,12 @@
 				<div class="variable-options-column-header" ng-if="variable.multi">
 					Selected ({{selectedValuesCount}})
 				</div>
-				<a class="variable-option pointer" bindonce ng-repeat="option in search.options" ng-class="{'selected': option.selected, 'highlighted': $index === highlightIndex}" ng-click="optionSelected(option, $event)">
-					<span class="fa fa-fw variable-option-icon"></span>
+				<a class="variable-option pointer" bindonce ng-repeat="option in search.options" ng-class="{'selected': option.selected, 'highlighted': $index === highlightIndex, 'multi': variable.multi}" ng-click="optionSelected(option, $event)">
+					<span class="variable-option-icon"></span>
 					<span>{{option.text}}</span>
 				</a>
 			</div>
-			<div class="variable-options-column" ng-if="variable.tags.length">
+			<div class="variable-options-column" ng-if="tags.length">
 				<div class="variable-options-column-header" ng-if="variable.tags.length">Tags</div>
 				<a class="variable-option-tag pointer" ng-repeat="tag in tags" ng-click="selectTag(tag, $event)" ng-class="{'selected': tag.selected}">
 					<span class="fa fa-fw variable-option-icon"></span>

public/css/less/submenu.less

@@ -44,6 +44,11 @@
   }
 }
 
+.variable-link-wrapper  {
+  display: inline-block;
+  position: relative;
+}
+
 .variable-value-dropdown {
   position: absolute;
   top: 47px;
@@ -57,7 +62,6 @@
   border: 1px solid @grafanaTargetFuncBackground;
   z-index: 1000;
   font-size: @baseFontSize;
-  padding: 0;
   border-radius: 3px 3px 0 0;
 }
 
@@ -84,20 +88,22 @@
   white-space: nowrap;
   min-width: 115px;
 
- .variable-option-icon {
-   display: inline-block;
-   width: 24px;
-   height: 18px;
-   position: relative;
-   top: 4px;
-   background: url(@checkboxImageUrl) left top no-repeat;
- }
+ &.multi {
+   .variable-option-icon {
+     display: inline-block;
+     width: 24px;
+     height: 18px;
+     position: relative;
+     top: 4px;
+     background: url(@checkboxImageUrl) left top no-repeat;
+   }
 
-  &.selected {
-    .variable-option-icon{
-      background: url(@checkboxImageUrl) 0px -18px no-repeat;
-    }
-  }
+   &.selected {
+     .variable-option-icon{
+       background: url(@checkboxImageUrl) 0px -18px no-repeat;
+     }
+   }
+ }
 }
 
 .variable-options-column-header {