diff --git a/src/bootstrap/select-multiple.tpl.html b/src/bootstrap/select-multiple.tpl.html index 04293b953..db932255b 100644 --- a/src/bootstrap/select-multiple.tpl.html +++ b/src/bootstrap/select-multiple.tpl.html @@ -8,7 +8,7 @@ autocapitalize="off" spellcheck="false" class="ui-select-search input-xs" - placeholder="{{$selectMultiple.getPlaceholder()}}" + placeholder="{{$select.getPlaceholder()}}" ng-disabled="$select.disabled" ng-click="$select.activate()" ng-model="$select.search" diff --git a/src/select2/select-multiple.tpl.html b/src/select2/select-multiple.tpl.html index ba1e34d85..3694aba73 100644 --- a/src/select2/select-multiple.tpl.html +++ b/src/select2/select-multiple.tpl.html @@ -16,7 +16,7 @@ aria-label="{{ $select.baseTitle }}" aria-activedescendant="ui-select-choices-row-{{ $select.generatedId }}-{{ $select.activeIndex }}" class="select2-input ui-select-search" - placeholder="{{$selectMultiple.getPlaceholder()}}" + placeholder="{{$select.getPlaceholder()}}" ng-disabled="$select.disabled" ng-hide="$select.disabled" ng-model="$select.search" diff --git a/src/selectize/select-multiple.tpl.html b/src/selectize/select-multiple.tpl.html index 9aceb6b36..f0617c3ff 100644 --- a/src/selectize/select-multiple.tpl.html +++ b/src/selectize/select-multiple.tpl.html @@ -6,7 +6,7 @@
- \ No newline at end of file + diff --git a/src/uiSelectController.js b/src/uiSelectController.js index 1bd3d1a4f..a92b94d2a 100644 --- a/src/uiSelectController.js +++ b/src/uiSelectController.js @@ -65,6 +65,11 @@ uis.controller('uiSelectCtrl', return isNil(ctrl.selected) || ctrl.selected === '' || (ctrl.multiple && ctrl.selected.length === 0); }; + ctrl.getPlaceholder = function(){ + if(ctrl.selected && ctrl.selected.length) return; + return ctrl.placeholder; + }; + function _findIndex(collection, predicate, thisArg){ if (collection.findIndex){ return collection.findIndex(predicate, thisArg); diff --git a/src/uiSelectMultipleDirective.js b/src/uiSelectMultipleDirective.js index 629256fb1..06de4f134 100644 --- a/src/uiSelectMultipleDirective.js +++ b/src/uiSelectMultipleDirective.js @@ -62,12 +62,6 @@ uis.directive('uiSelectMultiple', ['uiSelectMinErr','$timeout', function(uiSelec return true; }; - ctrl.getPlaceholder = function(){ - //Refactor single? - if($select.selected && $select.selected.length) return; - return $select.placeholder; - }; - }], controllerAs: '$selectMultiple', diff --git a/test/select.spec.js b/test/select.spec.js index 7332c6ec7..c9498bf1e 100644 --- a/test/select.spec.js +++ b/test/select.spec.js @@ -15,6 +15,8 @@ describe('ui-select tests', function () { Escape: 27 }; + var defaultPlaceholder = 'Pick one...'; + function isNil(value) { return angular.isUndefined(value) || value === null; } @@ -191,6 +193,10 @@ describe('ui-select tests', function () { return $(el).find('.ui-select-match > span:first > span[ng-transclude]:not(.ng-hide)').text(); } + function getMatchPlaceholder(el) { + return el.find('.ui-select-search').attr('placeholder') + } + function clickItem(el, text) { if (!isDropdownOpened(el)) { @@ -1874,7 +1880,9 @@ describe('ui-select tests', function () { function createUiSelectMultiple(attrs) { var attrsHtml = '', choicesAttrsHtml = '', - matchesAttrsHtml = ''; + matchesAttrsHtml = '', + matchesPlaceholder = defaultPlaceholder; + if (attrs !== undefined) { if (attrs.disabled !== undefined) { attrsHtml += ' ng-disabled="' + attrs.disabled + '"'; } if (attrs.required !== undefined) { attrsHtml += ' ng-required="' + attrs.required + '"'; } @@ -1884,23 +1892,27 @@ describe('ui-select tests', function () { if (attrs.taggingTokens !== undefined) { attrsHtml += ' tagging-tokens="' + attrs.taggingTokens + '"'; } if (attrs.taggingLabel !== undefined) { attrsHtml += ' tagging-label="' + attrs.taggingLabel + '"'; } if (attrs.inputId !== undefined) { attrsHtml += ' input-id="' + attrs.inputId + '"'; } - if (attrs.groupBy !== undefined) { choicesAttrsHtml += ' group-by="' + attrs.groupBy + '"'; } - if (attrs.uiDisableChoice !== undefined) { choicesAttrsHtml += ' ui-disable-choice="' + attrs.uiDisableChoice + '"'; } - if (attrs.lockChoice !== undefined) { matchesAttrsHtml += ' ui-lock-choice="' + attrs.lockChoice + '"'; } if (attrs.removeSelected !== undefined) { attrsHtml += ' remove-selected="' + attrs.removeSelected + '"'; } if (attrs.resetSearchInput !== undefined) { attrsHtml += ' reset-search-input="' + attrs.resetSearchInput + '"'; } if (attrs.limit !== undefined) { attrsHtml += ' limit="' + attrs.limit + '"'; } if (attrs.onSelect !== undefined) { attrsHtml += ' on-select="' + attrs.onSelect + '"'; } if (attrs.removeSelected !== undefined) { attrsHtml += ' remove-selected="' + attrs.removeSelected + '"'; } - if (attrs.refresh !== undefined) { choicesAttrsHtml += ' refresh="' + attrs.refresh + '"'; } - if (attrs.refreshDelay !== undefined) { choicesAttrsHtml += ' refresh-delay="' + attrs.refreshDelay + '"'; } if (attrs.spinnerEnabled !== undefined) { attrsHtml += ' spinner-enabled="' + attrs.spinnerEnabled + '"'; } if (attrs.spinnerClass !== undefined) { attrsHtml += ' spinner-class="' + attrs.spinnerClass + '"'; } + + if (attrs.groupBy !== undefined) { choicesAttrsHtml += ' group-by="' + attrs.groupBy + '"'; } + if (attrs.uiDisableChoice !== undefined) { choicesAttrsHtml += ' ui-disable-choice="' + attrs.uiDisableChoice + '"'; } + if (attrs.refresh !== undefined) { choicesAttrsHtml += ' refresh="' + attrs.refresh + '"'; } + if (attrs.refreshDelay !== undefined) { choicesAttrsHtml += ' refresh-delay="' + attrs.refreshDelay + '"'; } + + if (attrs.lockChoice !== undefined) { matchesAttrsHtml += ' ui-lock-choice="' + attrs.lockChoice + '"'; } } + matchesAttrsHtml += ' placeholder="' + matchesPlaceholder + '"'; + return compileTemplate( ' \ - {{$item.name}} <{{$item.email}}> \ + {{$item.name}} <{{$item.email}}> \ \
\
\ @@ -2971,6 +2983,65 @@ describe('ui-select tests', function () { triggerKeydown(searchInput, Key.Enter); expect(el.scope().$select.activeIndex).toBe(2); }); + + it('should not display the placeholder when tag is selected (by default)', function () { + var placeholderText = defaultPlaceholder; + + var el = createUiSelectMultiple({ + tagging: '', + taggingLabel: '' + }); + + var $select = el.scope().$select; // uiSelectCtrl + + expect($select.selected).toEqual([]); + expect($select.getPlaceholder()).toEqual(placeholderText); + expect(getMatchPlaceholder(el)).toEqual(placeholderText); // get placeholder + + clickItem(el, scope.people[0].name); + expect($select.selected).toEqual([scope.people[0]]); + expect(getMatchLabel(el)).toEqual(''); // empty text + expect(getMatchPlaceholder(el)).toEqual(''); // empty placeholder + + clickItem(el, scope.people[1].name); + expect($select.selected).toEqual([scope.people[0], scope.people[1]]); + expect(getMatchLabel(el)).toEqual(''); + expect(getMatchPlaceholder(el)).toEqual(''); + }); + + // Could be needed when e.g. tag is shown below the input + it('should display the placeholder when tag is selected (if user overrides .getPlaceholder())', function () { + var placeholderText = defaultPlaceholder; + + var el = createUiSelectMultiple({ + tagging: '', + taggingLabel: '' + }); + var $select = el.scope().$select; + + /** + * In case user wants to show placeholder when the text is empty - they can override $select.getPlaceholder. + * Cannot do this with $selectMultiple, bc