fixed click listener on single selection mode

Author: isteven

angular-multi-select.css

@@ -18,22 +18,11 @@
     min-width: 12px;
 }
 
-/* ! create a "row" */
-.multiSelect .line { 
-    height: 26px;
-    padding-bottom: 8px;    
-}
-
 /* ! */
 .multiSelect .inlineBlock {
     display: inline-block;
 }
 
-/*
-:focus { outline:none; }
-::-moz-focus-inner {border:0;}
-*/
-
 /* the multiselect button */
 .multiSelect .button {
     display: block;
@@ -117,6 +106,7 @@
     color: #666;    
     background-color: #f1f1f1;
     line-height: 1.6;
+    margin: 0px 0px 8px 0px;
 }
 
 /* clear button */
@@ -149,6 +139,7 @@
     -moz-box-sizing: border-box;    /* Firefox, other Gecko */
     box-sizing: border-box;         /* Opera/IE 8+ */    
     color: #888;
+    margin: 0px 0px 8px 0px;
 }
 
 /* helper elements on hover & focus */
@@ -257,24 +248,6 @@
     cursor: pointer;    
 }
 
-/* Some visual aids on item labels 
-.multiSelect label input:focus ~ span::after,
-.multiSelect label span:focus::after, 
-.multiSelect label span:hover::after  {     
-    /* Enable this if you want some arrow pointer on focus
-        content: ' \00AB';   
-}
-*/
-
-/* Another visual aid - highlight during TAB / SHIFT+TAB keyboard operations  
-.multiSelect label input:focus ~ span { 
-    color: #ff0000;    
-    text-shadow: 1px 0px #ccc;
-    /* Enable this if you want some arrow pointer on focus  
-        content: ' \00AB';   
-}
-*/
-
 /* checkboxes currently disabled */
 .multiSelect .disabled, 
 .multiSelect .disabled:hover,

angular-multi-select.js

@@ -75,12 +75,12 @@ angular.module( 'multi-select', ['ng'] ).directive( 'multiSelect' , [ '$sce', '$
                 '<div class="checkboxLayer">' +                        
                     '<form>' + 
                         '<div class="helperContainer" ng-if="displayHelper( \'filter\' ) || displayHelper( \'all\' ) || displayHelper( \'none\' ) || displayHelper( \'reset\' )">' +
-                            '<div class="line" ng-if="displayHelper( \'all\' ) || displayHelper( \'none\' ) || displayHelper( \'reset\' )">' +
+                            '<div ng-if="displayHelper( \'all\' ) || displayHelper( \'none\' ) || displayHelper( \'reset\' )">' +
                                 '<button type="button" ng-click="select( \'all\',   $event );"    class="helperButton" ng-if="!isDisabled && displayHelper( \'all\' )">   &#10003;&nbsp; Select All</button> ' +
                                 '<button type="button" ng-click="select( \'none\',  $event );"   class="helperButton" ng-if="!isDisabled && displayHelper( \'none\' )">  &times;&nbsp; Select None</button>&nbsp;' +
                                 '<button type="button" ng-click="select( \'reset\', $event );"  class="helperButton" ng-if="!isDisabled && displayHelper( \'reset\' )" style="float:right">&#8630;&nbsp; Reset</button>' +
                             '</div>' +
-                            '<div class="line" style="position:relative" ng-if="displayHelper( \'filter\' )">' +
+                            '<div style="position:relative" ng-if="displayHelper( \'filter\' )">' +
                                 '<input placeholder="Search..." type="text" ng-click="select( \'filter\', $event )" ng-model="inputLabel.labelFilter" ng-change="updateFilter();$scope.getFormElements();" class="inputFilter" />' +
                                 '<button type="button" class="clearButton" ng-click="inputLabel.labelFilter=\'\';updateFilter();prepareGrouping();prepareIndex();select( \'clear\', $event )">&times;</button> ' +
                             '</div>' +
@@ -552,6 +552,7 @@ angular.module( 'multi-select', ['ng'] ).directive( 'multiSelect' , [ '$sce', '$
 
                 // The idea below was taken from another multi-select directive - https://github.com/amitava82/angular-multiselect 
                 // His version is awesome if you need a more simple multi-select approach.
+
                 // close
                 if ( angular.element( $scope.checkBoxLayer ).hasClass( 'show' )) {                                          
                     angular.element( $scope.checkBoxLayer ).removeClass( 'show' );                    
@@ -596,9 +597,9 @@ angular.module( 'multi-select', ['ng'] ).directive( 'multiSelect' , [ '$sce', '$
                         $scope.tabIndex = $scope.tabIndex + helperItemsLength - 2;
                     }
                     // if there's no filter then just focus on the first checkbox item
-                    else {                        
-                        $scope.formElements[ $scope.tabIndex ].focus();
-                    }                    
+                    else {                                                
+                        $scope.formElements[ $scope.tabIndex ].focus();                                                
+                    }                       
 
                     // open callback
                     $scope.onOpen( { data: element } );