diff --git a/src/common.css b/src/common.css index d51edfb85..0a6494880 100644 --- a/src/common.css +++ b/src/common.css @@ -36,7 +36,7 @@ display:none; } -body > .select2-container { +body > .select2-container.open { z-index: 9999; /* The z-index Select2 applies to the select2-drop */ } @@ -120,7 +120,7 @@ body > .select2-container { margin-top: -1px; } -body > .ui-select-bootstrap { +body > .ui-select-bootstrap.open { z-index: 1000; /* Standard Bootstrap dropdown z-index */ } diff --git a/src/uiSelectMatchDirective.js b/src/uiSelectMatchDirective.js index 6ba728a97..b8102c7ad 100644 --- a/src/uiSelectMatchDirective.js +++ b/src/uiSelectMatchDirective.js @@ -16,7 +16,12 @@ uis.directive('uiSelectMatch', ['uiSelectConfig', function(uiSelectConfig) { $select.placeholder = placeholder !== undefined ? placeholder : uiSelectConfig.placeholder; }); - $select.allowClear = (angular.isDefined(attrs.allowClear)) ? (attrs.allowClear === '') ? true : (attrs.allowClear.toLowerCase() === 'true') : false; + function setAllowClear(allow) { + $select.allowClear = (angular.isDefined(allow)) ? (allow === '') ? true : (allow.toLowerCase() === 'true') : false; + } + + attrs.$observe('allowClear', setAllowClear); + setAllowClear(attrs.allowClear); if($select.multiple){ $select.sizeSearchInput(); diff --git a/test/select.spec.js b/test/select.spec.js index 2bcefb2a8..d502040b4 100644 --- a/test/select.spec.js +++ b/test/select.spec.js @@ -94,7 +94,8 @@ describe('ui-select tests', function() { } function createUiSelect(attrs) { - var attrsHtml = ''; + var attrsHtml = '', + matchAttrsHtml = ''; if (attrs !== undefined) { if (attrs.disabled !== undefined) { attrsHtml += ' ng-disabled="' + attrs.disabled + '"'; } if (attrs.required !== undefined) { attrsHtml += ' ng-required="' + attrs.required + '"'; } @@ -104,11 +105,12 @@ describe('ui-select tests', function() { if (attrs.taggingTokens !== undefined) { attrsHtml += ' tagging-tokens="' + attrs.taggingTokens + '"'; } if (attrs.title !== undefined) { attrsHtml += ' title="' + attrs.title + '"'; } if (attrs.appendToBody != undefined) { attrsHtml += ' append-to-body="' + attrs.appendToBody + '"'; } + if (attrs.allowClear != undefined) { matchAttrsHtml += ' allow-clear="' + attrs.allowClear + '"';} } return compileTemplate( ' \ - {{$select.selected.name}} \ + {{$select.selected.name}} \ \
\
\ @@ -296,6 +298,43 @@ describe('ui-select tests', function() { expect($select.open).toEqual(false); }); + it('should clear selection', function() { + scope.selection.selected = scope.people[0]; + + var el = createUiSelect({theme : 'select2', allowClear: 'true'}); + var $select = el.scope().$select; + + // allowClear should be true. + expect($select.allowClear).toEqual(true); + + // Trigger clear. + el.find('.select2-search-choice-close').click(); + expect(scope.selection.selected).toEqual(undefined); + + // If there is no selection it the X icon should be gone. + expect(el.find('.select2-search-choice-close').length).toEqual(0); + + }); + + it('should toggle allow-clear directive', function() { + scope.selection.selected = scope.people[0]; + scope.isClearAllowed = false; + + var el = createUiSelect({theme : 'select2', allowClear: '{{isClearAllowed}}'}); + var $select = el.scope().$select; + + expect($select.allowClear).toEqual(false); + expect(el.find('.select2-search-choice-close').length).toEqual(0); + + // Turn clear on + scope.isClearAllowed = true; + scope.$digest(); + + expect($select.allowClear).toEqual(true); + expect(el.find('.select2-search-choice-close').length).toEqual(1); + }); + + it('should pass tabindex to focusser', function() { var el = createUiSelect({tabindex: 5});