Fix numerous issues with select enabled (#1717)

* 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 #1059, fixes #917, fixes #589, fixes #375
Closes #1543, closes #1114, closes #1109 (supersedes all)

* fix(selectize): show placeholder when search disabled

Previously when searchEnabled was set to false, the placeholder would
also be hidden on the selectize theme.

This fix sets the search input to disabled rather then hidden when the
searchEnabled attribute is set to false.

Fixes #1145, fixes #949, fixes #691

* fix(searchEnabled): Prevent searching when disabled

Previously, even when search-enabled was set to false, users could
still type in text and filter the list. This made disabling the search
feature pointless.

This fix prevents text entry to the search input and thus disables
filtering.

Fixes #1658

Author: user378230

docs/examples/demo-disable-search.html

@@ -23,6 +23,18 @@ <h3>Bootstrap theme</h3>
       </small>
     </ui-select-choices>
   </ui-select>
+  <hr />
+  <p>Number Selected: {{ctrl.multipleDemo.selectedPeople.length}}</p>
+  <ui-select multiple ng-model="ctrl.multipleDemo.selectedPeople" theme="bootstrap" search-enabled="ctrl.searchEnabled" ng-disabled="ctrl.disabled" style="min-width: 300px;" title="Choose a person">
+    <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
+    <ui-select-choices repeat="person in ctrl.people | propsFilter: {name: $select.search, age: $select.search}">
+      <div ng-bind-html="person.name | highlight: $select.search"></div>
+      <small>
+        email: {{person.email}}
+        age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
+      </small>
+    </ui-select-choices>
+  </ui-select>
 
   <h3>Select2 theme</h3>
   <p>Selected: {{ctrl.person.selected}}</p>
@@ -36,7 +48,18 @@ <h3>Select2 theme</h3>
       </small>
     </ui-select-choices>
   </ui-select>
-
+  <hr />
+  <p>Number Selected: {{ctrl.multipleDemo.selectedPeople.length}}</p>
+  <ui-select multiple ng-model="ctrl.multipleDemo.selectedPeople" theme="select2" search-enabled="ctrl.searchEnabled" ng-disabled="ctrl.disabled" style="min-width: 300px;">
+    <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
+    <ui-select-choices repeat="person in ctrl.people | propsFilter: {name: $select.search, age: $select.search}">
+      <div ng-bind-html="person.name | highlight: $select.search"></div>
+      <small>
+        email: {{person.email}}
+        age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
+      </small>
+    </ui-select-choices>
+  </ui-select>
   <h3>Selectize theme</h3>
   <p>Selected: {{ctrl.country.selected}}</p>
   <ui-select ng-model="ctrl.country.selected" theme="selectize" search-enabled="ctrl.searchEnabled" ng-disabled="ctrl.disabled" style="width: 300px;">

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,19 @@ 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"] input.ui-select-search-hidden{
+    opacity: 0;
+    height: 0;
+    min-height: 0;
+    padding: 0;
+    margin: 0;
+    border:0;
+    width: 0;
+}
+
 /* Bootstrap theme */
 
 /* Helper class to show styles when focus */
@@ -145,6 +164,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/match.tpl.html

@@ -1 +1,6 @@
-<div ng-hide="$select.searchEnabled && ($select.open || $select.isEmpty())" class="ui-select-match" ng-transclude></div>
+<div ng-hide="$select.searchEnabled && ($select.open || $select.isEmpty())" class="ui-select-match">
+  <span ng-show="!$select.searchEnabled && ($select.isEmpty() || $select.open)" class="ui-select-placeholder text-muted">{{$select.placeholder}}</span>
+  <span ng-hide="$select.isEmpty() || $select.open" ng-transclude></span>
+</div>
+
+

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) {
@@ -611,7 +615,10 @@ uis.controller('uiSelectCtrl',
       var tagged = false;
 
       if (ctrl.items.length > 0 || ctrl.tagging.isActivated) {
-        _handleDropDownSelection(key);
+        if(!_handleDropDownSelection(key) && !ctrl.searchEnabled) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
         if ( ctrl.taggingTokens.isActivated ) {
           for (var i = 0; i < ctrl.taggingTokens.tokens.length; i++) {
             if ( ctrl.taggingTokens.tokens[i] === KEY.MAP[e.keyCode] ) {

test/select.spec.js

@@ -1749,12 +1749,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');
       });
 
     });
@@ -1763,12 +1763,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');
       });
 
     });
@@ -1778,13 +1778,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');
       });
 
     });