Don't hide select when SearchEnable is false

angular-ui#453
Update to move search box off screen
Fix test to check against ui-select-offscreen class, not ng-hide

Signed-off-by: Chris Jackson <[email protected]>

Author: cdjackson

examples/bootstrap.html

@@ -42,20 +42,35 @@
     <fieldset>
       <legend>ui-select inside a Bootstrap form</legend>
 
-      <div class="form-group">
-        <label class="col-sm-3 control-label">Default</label>
-        <div class="col-sm-6">
+        <div class="form-group">
+            <label class="col-sm-3 control-label">Default</label>
+            <div class="col-sm-6">
+
+                <ui-select ng-model="person.selected" theme="bootstrap">
+                    <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
+                    <ui-select-choices repeat="item in people | filter: $select.search">
+                        <div ng-bind-html="item.name | highlight: $select.search"></div>
+                        <small ng-bind-html="item.email | highlight: $select.search"></small>
+                    </ui-select-choices>
+                </ui-select>
+
+            </div>
+        </div>
 
-          <ui-select ng-model="person.selected" theme="bootstrap">
-            <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
-            <ui-select-choices repeat="item in people | filter: $select.search">
-              <div ng-bind-html="item.name | highlight: $select.search"></div>
-              <small ng-bind-html="item.email | highlight: $select.search"></small>
-            </ui-select-choices>
-          </ui-select>
+        <div class="form-group">
+          <label class="col-sm-3 control-label">Search Disabled</label>
+          <div class="col-sm-6">
 
+            <ui-select ng-model="person.selected" theme="bootstrap" search-enabled="false">
+              <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
+              <ui-select-choices repeat="item in people | filter: $select.search">
+                <div ng-bind-html="item.name | highlight: $select.search"></div>
+                <small ng-bind-html="item.email | highlight: $select.search"></small>
+              </ui-select-choices>
+            </ui-select>
+
+          </div>
         </div>
-      </div>
 
       <div class="form-group">
         <label class="col-sm-3 control-label">Grouped</label>

src/bootstrap/match.tpl.html

@@ -1,4 +1,4 @@
-<div class="ui-select-match" ng-hide="$select.open" ng-disabled="$select.disabled" ng-class="{'btn-default-focus':$select.focus}">
+<div class="ui-select-match" ng-hide="$select.searchEnabled && $select.open" ng-disabled="$select.disabled" ng-class="{'btn-default-focus':$select.focus}">
   <span tabindex="-1"
       class="btn btn-default form-control ui-select-toggle"
       aria-label="{{ $select.baseTitle }} activate"

src/bootstrap/select.tpl.html

@@ -8,6 +8,6 @@
          class="form-control ui-select-search"
          placeholder="{{$select.placeholder}}"
          ng-model="$select.search"
-         ng-show="$select.searchEnabled && $select.open">
+         ng-show="$select.open">
   <div class="ui-select-choices"></div>
 </div>

src/uiSelectController.js

@@ -113,6 +113,9 @@ uis.controller('uiSelectCtrl',
       $scope.$broadcast('uis:activate');
 
       ctrl.open = true;
+      if(!ctrl.searchEnabled) {
+        angular.element(ctrl.searchInput[0]).addClass('ui-select-offscreen');
+      }
 
       ctrl.activeIndex = ctrl.activeIndex >= ctrl.items.length ? 0 : ctrl.activeIndex;
 
@@ -141,6 +144,10 @@ uis.controller('uiSelectCtrl',
         });
       }
     }
+    else if (ctrl.open && !ctrl.searchEnabled) {
+      // Close the selection if we don't have search enabled, and we click on the select again
+      ctrl.close();
+    }
   };
 
   ctrl.focusSearchInput = function (initSearchValue) {
@@ -390,6 +397,9 @@ uis.controller('uiSelectCtrl',
     if (ctrl.ngModel && ctrl.ngModel.$setTouched) ctrl.ngModel.$setTouched();
     _resetSearchInput();
     ctrl.open = false;
+    if(!ctrl.searchEnabled) {
+      angular.element(ctrl.searchInput[0]).removeClass('ui-select-offscreen');
+    }
 
     $scope.$broadcast('uis:close', skipFocusser);
 

test/select.spec.js

@@ -1557,13 +1557,13 @@ describe('ui-select tests', function() {
       it('should show search input when true', function() {
         setupSelectComponent('true', 'bootstrap');
         clickMatch(el);
-        expect($(el).find('.ui-select-search')).not.toHaveClass('ng-hide');
+        expect($(el).find('.ui-select-search')).not.toHaveClass('ui-select-offscreen');
       });
 
       it('should hide search input when false', function() {
         setupSelectComponent('false', 'bootstrap');
         clickMatch(el);
-        expect($(el).find('.ui-select-search')).toHaveClass('ng-hide');
+        expect($(el).find('.ui-select-search')).toHaveClass('ui-select-offscreen');
       });
 
     });