fix(searchEnabled): maintain keyboard nagivation

Fix issue where keyboard navigation was disabled when searchEnabled
was set to false.

Caused by hiding the input box which prevent key events from
propagating to the directive.

Resolved hiding the input offscreen when searchEnabled is false.

Fixes angular-ui#1059, fixes angular-ui#917, fixes angular-ui#589, fixes angular-ui#375
Closes angular-ui#1543, closes angular-ui#1114, closes angular-ui#1109 (supersedes all)

Author: cbryer

src/bootstrap/select.tpl.html

@@ -6,9 +6,10 @@
          aria-owns="ui-select-choices-{{ $select.generatedId }}"
          aria-activedescendant="ui-select-choices-row-{{ $select.generatedId }}-{{ $select.activeIndex }}"
          class="form-control ui-select-search"
+         ng-class="{ 'ui-select-search-hidden' : !$select.searchEnabled }"
          placeholder="{{$select.placeholder}}"
          ng-model="$select.search"
-         ng-show="$select.searchEnabled && $select.open">
+         ng-show="$select.open">
   <div class="ui-select-choices"></div>
   <div class="ui-select-no-choice"></div>
 </div>

src/common.css

@@ -74,6 +74,16 @@ body > .select2-container.open {
     border-bottom-color: #5897fb;
 }
 
+.ui-select-container[theme="select2"] .ui-select-dropdown .ui-select-search-hidden,
+.ui-select-container[theme="select2"] .ui-select-dropdown .ui-select-search-hidden input{
+    opacity: 0;
+    height: 0;
+    min-height: 0;
+    padding: 0;
+    margin: 0;
+    border:0;
+}
+
 /* Selectize theme */
 
 /* Helper class to show styles when focus */
@@ -99,10 +109,18 @@ body > .select2-container.open {
 /* Handle up direction Selectize */
 .ui-select-container[theme="selectize"].direction-up .ui-select-dropdown {
     box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
-
     margin-top: -2px; /* FIXME hardcoded value :-/ */
 }
 
+.ui-select-container[theme="selectize"] .ui-select-search-hidden{
+    opacity: 0;
+    height: 0;
+    min-height: 0;
+    padding: 0;
+    margin: 0;
+    border:0;
+}
+
 /* Bootstrap theme */
 
 /* Helper class to show styles when focus */
@@ -145,6 +163,15 @@ body > .select2-container.open {
   border-bottom-right-radius: 0 !important;
 }
 
+.ui-select-bootstrap .ui-select-search-hidden{
+    opacity: 0;
+    height: 0;
+    min-height: 0;
+    padding: 0;
+    margin: 0;
+    border:0;
+}
+
 .ui-select-bootstrap > .ui-select-match > .btn{
   /* Instead of center because of .btn */
   text-align: left !important;

src/select2/select.tpl.html

@@ -6,7 +6,7 @@
   <div class="ui-select-match"></div>
   <div class="ui-select-dropdown select2-drop select2-with-searchbox select2-drop-active"
        ng-class="{'select2-display-none': !$select.open}">
-    <div class="select2-search" ng-show="$select.searchEnabled">
+    <div class="search-container" ng-class="{'ui-select-search-hidden':!$select.searchEnabled, 'select2-search':$select.searchEnabled}">
       <input type="search" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
        role="combobox"
        aria-expanded="true"

src/selectize/select.tpl.html

@@ -5,10 +5,11 @@
     <div class="ui-select-match"></div>
     <input type="search" autocomplete="off" tabindex="-1"
            class="ui-select-search ui-select-toggle"
+           ng-class="{'ui-select-search-hidden':!$select.searchEnabled}"
            ng-click="$select.toggle($event)"
            placeholder="{{$select.placeholder}}"
            ng-model="$select.search"
-           ng-hide="!$select.searchEnabled || (!$select.isEmpty() && !$select.open)"
+           ng-hide="!$select.isEmpty() && !$select.open"
            ng-disabled="$select.disabled"
            aria-label="{{ $select.baseTitle }}">
   </div>

src/uiSelectController.js

@@ -156,6 +156,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) {

test/select.spec.js

@@ -1698,12 +1698,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-hidden');
       });
 
       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-hidden');
       });
 
     });
@@ -1712,12 +1712,12 @@ describe('ui-select tests', function() {
 
       it('should show search input when true', function() {
         setupSelectComponent('true', 'select2');
-        expect($(el).find('.select2-search')).not.toHaveClass('ng-hide');
+        expect($(el).find('.search-container')).not.toHaveClass('ui-select-search-hidden');
       });
 
       it('should hide search input when false', function() {
         setupSelectComponent('false', 'select2');
-        expect($(el).find('.select2-search')).toHaveClass('ng-hide');
+        expect($(el).find('.search-container')).toHaveClass('ui-select-search-hidden');
       });
 
     });
@@ -1727,13 +1727,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-hidden');
       });
 
       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-hidden');
       });
 
     });