From b5cc90267d9b6634bb26c4c5df1b38994d603f4b Mon Sep 17 00:00:00 2001 From: cbryer Date: Wed, 29 Jul 2015 13:21:33 -0400 Subject: [PATCH 1/3] 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) --- src/bootstrap/select.tpl.html | 3 ++- src/common.css | 29 ++++++++++++++++++++++++++++- src/select2/select.tpl.html | 2 +- src/selectize/select.tpl.html | 3 ++- src/uiSelectController.js | 4 ++++ test/select.spec.js | 12 ++++++------ 6 files changed, 43 insertions(+), 10 deletions(-) diff --git a/src/bootstrap/select.tpl.html b/src/bootstrap/select.tpl.html index 293e51a51..bed1e4d77 100644 --- a/src/bootstrap/select.tpl.html +++ b/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">
diff --git a/src/common.css b/src/common.css index 0a843ea18..580c42d4a 100644 --- a/src/common.css +++ b/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; diff --git a/src/select2/select.tpl.html b/src/select2/select.tpl.html index 7b905a63f..60629c9b0 100644 --- a/src/select2/select.tpl.html +++ b/src/select2/select.tpl.html @@ -6,7 +6,7 @@
-
+
diff --git a/src/uiSelectController.js b/src/uiSelectController.js index b7dc2801c..c467d6de9 100644 --- a/src/uiSelectController.js +++ b/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) { diff --git a/test/select.spec.js b/test/select.spec.js index 5b735689f..131772957 100644 --- a/test/select.spec.js +++ b/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'); }); }); From 5691f581b16fe15287f3072fa3dffd79d230c432 Mon Sep 17 00:00:00 2001 From: user378230 Date: Sun, 10 Jul 2016 21:22:19 +0100 Subject: [PATCH 2/3] 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 --- docs/examples/demo-disable-search.html | 25 ++++++++++++++++++++++++- src/common.css | 3 ++- src/selectize/match.tpl.html | 7 ++++++- 3 files changed, 32 insertions(+), 3 deletions(-) diff --git a/docs/examples/demo-disable-search.html b/docs/examples/demo-disable-search.html index a6555fdb7..3b65c14b9 100644 --- a/docs/examples/demo-disable-search.html +++ b/docs/examples/demo-disable-search.html @@ -23,6 +23,18 @@

Bootstrap theme

+
+

Number Selected: {{ctrl.multipleDemo.selectedPeople.length}}

+ + {{$item.name}} <{{$item.email}}> + +
+ + email: {{person.email}} + age: + + +

Select2 theme

Selected: {{ctrl.person.selected}}

@@ -36,7 +48,18 @@

Select2 theme

- +
+

Number Selected: {{ctrl.multipleDemo.selectedPeople.length}}

+ + {{$item.name}} <{{$item.email}}> + +
+ + email: {{person.email}} + age: + + +

Selectize theme

Selected: {{ctrl.country.selected}}

diff --git a/src/common.css b/src/common.css index 580c42d4a..051c3154d 100644 --- a/src/common.css +++ b/src/common.css @@ -112,13 +112,14 @@ body > .select2-container.open { margin-top: -2px; /* FIXME hardcoded value :-/ */ } -.ui-select-container[theme="selectize"] .ui-select-search-hidden{ +.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 */ diff --git a/src/selectize/match.tpl.html b/src/selectize/match.tpl.html index dff19ce86..00297b4fb 100644 --- a/src/selectize/match.tpl.html +++ b/src/selectize/match.tpl.html @@ -1 +1,6 @@ -
+
+ {{$select.placeholder}} + +
+ + From 4184fa7224c04f2e46b49afaf4d3ebd29c590637 Mon Sep 17 00:00:00 2001 From: user378230 Date: Sun, 10 Jul 2016 22:44:31 +0100 Subject: [PATCH 3/3] 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 --- src/uiSelectController.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/uiSelectController.js b/src/uiSelectController.js index c467d6de9..811e4d673 100644 --- a/src/uiSelectController.js +++ b/src/uiSelectController.js @@ -613,7 +613,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] ) {