Merge pull request #481 from asafdav/master

Closes a dropdown when another one is opened

Author: amcdnl

.gitignore

@@ -2,3 +2,4 @@
 /node_modules
 /.idea
 /.tmp
+.DS_Store

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

@@ -65,6 +65,25 @@
     };
   }
 
+  /**
+   * Add closest() to jqLite.
+   */
+  if (angular.element.prototype.closest === undefined) {
+    angular.element.prototype.closest = function( selector) {
+      var elem = this[0];
+      var matchesSelector = elem.matches || elem.webkitMatchesSelector || elem.mozMatchesSelector || elem.msMatchesSelector;
+
+      while (elem) {
+        if (matchesSelector.bind(elem)(selector)) {
+          return elem;
+        } else {
+          elem = elem.parentElement;
+        }
+      }
+      return false;
+    };
+  }
+
   angular.module('ui.select', [])
 
   .constant('uiSelectConfig', {
@@ -435,9 +454,13 @@
 
     // Toggle dropdown
     ctrl.toggle = function(e) {
-      if (ctrl.open) ctrl.close(); else ctrl.activate();
-      e.preventDefault();
-      e.stopPropagation();
+      if (ctrl.open) {
+        ctrl.close(); 
+        e.preventDefault();
+        e.stopPropagation();        
+      } else {
+        ctrl.activate();
+      }
     };
 
     ctrl.isLocked = function(itemScope, itemIndex) {
@@ -1112,7 +1135,7 @@
           }
 
           if (!contains && !$select.clickTriggeredSelect) {
-            $select.close();
+            $select.close(angular.element(e.target).closest('.ui-select-container.open').length > 0); // 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,25 @@ 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();
+    el1.appendTo(document.body);
+    el2.appendTo(document.body);
+
+    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);
+
+    el1.remove();
+    el2.remove();
+  });
+
   describe('disabled options', function() {
     function createUiSelect(attrs) {
       var attrsDisabled = '';
@@ -1629,7 +1648,6 @@ describe('ui-select tests', function() {
         var el = setupWithAttr(false);
         expect(el.scope().$select.searchEnabled).not.toBe(true);
       });
-
     });
 
   });