From 765badfd84acf344764924f98547a63596acaa32 Mon Sep 17 00:00:00 2001
From: Andrew Eisenberg <andrew.eisenberg@tasktop.com>
Date: Sat, 24 Jan 2015 21:51:59 -0800
Subject: [PATCH] Move search box off screen when clicked and searchDisabled

This change ensures that the search boxes are not hidden
when in !searchEnabled and they are clicked. This
ensures that they can still receive focus and react to
keyboard events. This addresses issue #331.
---
 src/bootstrap/select.tpl.html | 3 ++-
 src/select.css                | 4 ++++
 src/selectize/select.tpl.html | 7 ++++---
 test/select.spec.js           | 8 ++++----
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/bootstrap/select.tpl.html b/src/bootstrap/select.tpl.html
index 880396a38..3362317b0 100644
--- a/src/bootstrap/select.tpl.html
+++ b/src/bootstrap/select.tpl.html
@@ -8,6 +8,7 @@
          class="form-control ui-select-search"
          placeholder="{{$select.placeholder}}"
          ng-model="$select.search"
-         ng-show="$select.searchEnabled && $select.open">
+         ng-show="$select.open"
+         ng-class="{'ui-select-search-disabled' : !$select.searchEnabled}">
   <div class="ui-select-choices"></div>
 </div>
diff --git a/src/select.css b/src/select.css
index c5aecbd2a..6ea0e8671 100644
--- a/src/select.css
+++ b/src/select.css
@@ -184,3 +184,7 @@
 .ui-select-bootstrap.ng-dirty.ng-invalid > button.btn.ui-select-match {
     border-color: #D44950;
 }
+
+.ui-select-search-disabled {
+  position: fixed; top: -80px; left: -20px;
+}
diff --git a/src/selectize/select.tpl.html b/src/selectize/select.tpl.html
index 1587ab8c7..2ab01892b 100644
--- a/src/selectize/select.tpl.html
+++ b/src/selectize/select.tpl.html
@@ -1,6 +1,6 @@
 <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-class="{'focus': $select.open, 'disabled': $select.disabled, 'selectize-focus' : $select.focus }"
        ng-click="$select.activate()">
     <div class="ui-select-match"></div>
     <input type="text" autocomplete="off" tabindex="-1"
@@ -8,9 +8,10 @@
            ng-click="$select.toggle($event)"
            placeholder="{{$select.placeholder}}"
            ng-model="$select.search"
-           ng-hide="!$select.searchEnabled || ($select.selected && !$select.open)"
+           ng-hide="($select.selected && !$select.open)"
            ng-disabled="$select.disabled"
-           aria-label="{{ $select.baseTitle }}">
+           aria-label="{{ $select.baseTitle }}"
+           ng-class="{'ui-select-search-disabled' : !$select.searchEnabled}">
   </div>
   <div class="ui-select-choices"></div>
 </div>
diff --git a/test/select.spec.js b/test/select.spec.js
index 32271d606..44c6bd5d9 100644
--- a/test/select.spec.js
+++ b/test/select.spec.js
@@ -1067,12 +1067,12 @@ describe('ui-select tests', function() {
 
       it('should show search input when true', function() {
         setupSelectComponent(true, 'selectize');
-        expect($(el).find('.ui-select-search')).not.toHaveClass('ng-hide');
+        expect($(el).find('.ui-select-search')).not.toHaveClass('ui-select-search-disabled');
       });
 
       it('should hide search input when false', function() {
         setupSelectComponent(false, 'selectize');
-        expect($(el).find('.ui-select-search')).toHaveClass('ng-hide');
+        expect($(el).find('.ui-select-search')).toHaveClass('ui-select-search-disabled');
       });
 
     });
@@ -1096,13 +1096,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-search-disabled');
       });
 
       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-search-disabled');
       });
 
     });