Update to move search box off screen

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/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

@@ -79,6 +79,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;
 
@@ -94,6 +97,10 @@ uis.controller('uiSelectCtrl',
         ctrl.searchInput[0].focus();
       });
     }
+    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.findGroupByName = function(name) {
@@ -312,6 +319,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);