Fixed focus issues and removed the "ugly" 50 milli timeout

Author: asafdav

src/bootstrap/select-multiple.tpl.html

@@ -1,4 +1,4 @@
-<div class="ui-select-multiple ui-select-bootstrap dropdown form-control" ng-class="{open: $select.open}">
+<div class="ui-select-container ui-select-multiple ui-select-bootstrap dropdown form-control" ng-class="{open: $select.open}">
   <div>
     <div class="ui-select-match"></div>
     <input type="text"

src/bootstrap/select.tpl.html

@@ -1,4 +1,4 @@
-<div class="ui-select-bootstrap dropdown" ng-class="{open: $select.open}">
+<div class="ui-select-container ui-select-bootstrap dropdown" ng-class="{open: $select.open}">
   <div class="ui-select-match"></div>
   <input type="text" autocomplete="off" tabindex="-1"
          class="form-control ui-select-search"

src/select.js

@@ -211,7 +211,7 @@
         $timeout(function() {
           ctrl.search = initSearchValue || ctrl.search;
           _searchInput[0].focus();
-        }, 50);
+        });
       }
     };
 
@@ -1079,6 +1079,24 @@
           $select.selected = ngModel.$viewValue;
         };
 
+        /**
+         * Checks if the current target is a ui-select-match element
+         *
+         * @param target
+         * @returns {boolean}
+         */
+        function isClosedUiSelect(target) {
+          var node = target.parentNode;
+          while (node !== null) {
+            if (angular.element(node).hasClass('ui-select-container') &&
+                angular.element(node).hasClass('open')) {
+              return true;
+            }
+            node = node.parentNode;
+          }
+          return false;
+        }
+
         function onDocumentClick(e) {
           var contains = false;
 
@@ -1091,7 +1109,7 @@
           }
 
           if (!contains && !$select.clickTriggeredSelect) {
-            $select.close();
+            $select.close(isClosedUiSelect(e.target)); // Skip focusser if the target is another select
             scope.$digest();
           }
           $select.clickTriggeredSelect = false;

src/select2/select-multiple.tpl.html

@@ -1,5 +1,5 @@
-<div class="ui-select-multiple select2 select2-container select2-container-multi"
-     ng-class="{'select2-container-active select2-dropdown-open': $select.open,
+<div class="ui-select-container ui-select-multiple select2 select2-container select2-container-multi"
+     ng-class="{'select2-container-active select2-dropdown-open open': $select.open,
                 'select2-container-disabled': $select.disabled}">
   <ul class="select2-choices">
     <span class="ui-select-match"></span>

src/select2/select.tpl.html

@@ -1,5 +1,5 @@
-<div class="select2 select2-container"
-     ng-class="{'select2-container-active select2-dropdown-open': $select.open,
+<div class="ui-select-container select2 select2-container"
+     ng-class="{'select2-container-active select2-dropdown-open open': $select.open,
                 'select2-container-disabled': $select.disabled,
                 'select2-container-active': $select.focus, 
                 'select2-allowclear': $select.allowClear && !$select.isEmpty()}">

src/selectize/select.tpl.html

@@ -1,4 +1,4 @@
-<div class="selectize-control single">
+<div class="ui-select-container selectize-control single" ng-class="{'open': $select.open}">
   <div class="selectize-input"
        ng-class="{'focus': $select.open, 'disabled': $select.disabled, 'selectize-focus' : $select.focus}"
        ng-click="$select.activate()">

test/select.spec.js

@@ -315,6 +315,20 @@ describe('ui-select tests', function() {
     expect(getMatchLabel(el)).toEqual('false');
   });
 
+  it('should close an opened select when another one is opened', function() {
+    var el1 = createUiSelect();
+    var el2 = createUiSelect();
+
+    expect(isDropdownOpened(el1)).toEqual(false);
+    expect(isDropdownOpened(el2)).toEqual(false);
+    clickMatch(el1);
+    expect(isDropdownOpened(el1)).toEqual(true);
+    expect(isDropdownOpened(el2)).toEqual(false);
+    clickMatch(el2);
+    expect(isDropdownOpened(el1)).toEqual(false);
+    expect(isDropdownOpened(el2)).toEqual(true);
+  });  
+
   describe('disabled options', function() {
     function createUiSelect(attrs) {
       var attrsDisabled = '';
@@ -1629,7 +1643,6 @@ describe('ui-select tests', function() {
         var el = setupWithAttr(false);
         expect(el.scope().$select.searchEnabled).not.toBe(true);
       });
-
     });
 
   });