Merge pull request angular-ui#177 from angular-ui/feat-toogledropdown

feat(choices): toggle dropdown when clicking caret icon

Author: dimirc

src/bootstrap/match.tpl.html

@@ -5,5 +5,5 @@
         ng-click="$select.activate()">
   <span ng-show="$select.searchEnabled && $select.isEmpty()" class="text-muted">{{$select.placeholder}}</span>
   <span ng-hide="$select.isEmpty()" ng-transclude></span>
-  <span class="caret"></span>
+  <span class="caret ui-select-toggle" ng-click="$select.toggle($event)"></span>
 </button>

src/select.js

@@ -330,6 +330,13 @@
       }
     };
 
+    // Toggle dropdown
+    ctrl.toggle = function(e) {
+      if (ctrl.open) ctrl.close(); else ctrl.activate();
+      e.preventDefault();
+      e.stopPropagation();
+    };
+
     // Remove item from multiple select
     ctrl.removeChoice = function(index){
       ctrl.selected.splice(index, 1);

src/select2/match.tpl.html

@@ -8,5 +8,5 @@
    ng-click="$select.activate()">
   <span ng-show="$select.searchEnabled && $select.isEmpty()" class="select2-chosen">{{$select.placeholder}}</span>
   <span ng-hide="$select.isEmpty()" class="select2-chosen" ng-transclude></span>
-  <span class="select2-arrow"><b></b></span>
+  <span class="select2-arrow ui-select-toggle" ng-click="$select.toggle($event)"><b></b></span>
 </a>

src/selectize/select.tpl.html

@@ -4,7 +4,8 @@
        ng-click="$select.activate()">
     <div class="ui-select-match"></div>
     <input type="text" autocomplete="off" tabindex="-1"
-           class="ui-select-search"
+           class="ui-select-search ui-select-toggle"
+           ng-click="$select.toggle($event)"
            placeholder="{{$select.placeholder}}"
            ng-model="$select.search"
            ng-hide="!$select.searchEnabled || ($select.selected && !$select.open)"

test/select.spec.js

@@ -65,6 +65,7 @@ describe('ui-select tests', function() {
     if (attrs !== undefined) {
       if (attrs.disabled !== undefined) { attrsHtml += ' ng-disabled="' + attrs.disabled + '"'; }
       if (attrs.required !== undefined) { attrsHtml += ' ng-required="' + attrs.required + '"'; }
+      if (attrs.theme !== undefined) { attrsHtml += ' theme="' + attrs.theme + '"'; }
     }
 
     return compileTemplate(
@@ -188,6 +189,24 @@ describe('ui-select tests', function() {
     expect(isDropdownOpened(el)).toEqual(false);
   });
 
+
+  it('should open/close dropdown when clicking caret icon', function() {
+
+    var el = createUiSelect({theme : 'select2'});
+    var searchInput = el.find('.ui-select-search');
+    var $select = el.scope().$select;
+    
+    expect($select.open).toEqual(false);
+
+    el.find(".ui-select-toggle").click();
+    expect($select.open).toEqual(true);
+
+
+    el.find(".ui-select-toggle").click();
+    expect($select.open).toEqual(false);
+
+  });
+
   it('should be disabled if the attribute says so', function() {
     var el1 = createUiSelect({disabled: true});
     expect(el1.scope().$select.disabled).toEqual(true);