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/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..051c3154d 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,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; 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 @@
-
+
+
+ {{$select.placeholder}} + +
+ + diff --git a/src/selectize/select.tpl.html b/src/selectize/select.tpl.html index 1106f29da..14dbeaa46 100644 --- a/src/selectize/select.tpl.html +++ b/src/selectize/select.tpl.html @@ -5,10 +5,11 @@
diff --git a/src/uiSelectController.js b/src/uiSelectController.js index b7dc2801c..811e4d673 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) { @@ -609,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] ) { 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'); }); });