fix($selectMultiple): allow user to override getPlaceholder() Behavior

User can provide their custom `getPlaceholder()` function. E.g. to keep placeholder activated in multipleSelect component, you can use this one:
```
angular.module('myApp').directive('myAppUiSelectPlaceholderAlwaysVisible', function() {
  return {
    require: 'uiSelect',
    link: function($scope, $element, attrs, $select) {
      $select.getPlaceholder = function () {
        return $select.placeholder;
      }
    }
  }
});
```
And then add this directive to the `<ui-select>` html element

closes #1796

Author: DmitryGonchar

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"

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"

src/selectize/select-multiple.tpl.html

@@ -6,7 +6,7 @@
     <input type="search" autocomplete="off" tabindex="-1"
            class="ui-select-search"
            ng-class="{'ui-select-search-hidden':!$select.searchEnabled}"
-           placeholder="{{$selectMultiple.getPlaceholder()}}"
+           placeholder="{{$select.getPlaceholder()}}"
            ng-model="$select.search"
            ng-disabled="$select.disabled"
            aria-expanded="{{$select.open}}"
@@ -15,4 +15,4 @@
   </div>
   <div class="ui-select-choices"></div>
   <div class="ui-select-no-choice"></div>
-</div>
+</div>

src/uiSelectController.js

@@ -65,6 +65,12 @@ uis.controller('uiSelectCtrl',
     return isNil(ctrl.selected) || ctrl.selected === '' || (ctrl.multiple && ctrl.selected.length === 0);
   };
 
+  ctrl.getPlaceholder = function(){
+    //Refactor single?
+    if(ctrl.selected && ctrl.selected.length) return;
+    return ctrl.placeholder;
+  };
+
   function _findIndex(collection, predicate, thisArg){
     if (collection.findIndex){
       return collection.findIndex(predicate, thisArg);

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',

test/select.spec.js

@@ -15,6 +15,14 @@ describe('ui-select tests', function () {
     Escape: 27
   };
 
+  var multipleTagsTmpl =
+    '<ui-select multiple tagging tagging-label="" ng-model="selection.selected"> \
+      <ui-select-match ng-attr-placeholder="{{::placeholderText}}">{{$select.selected}}</ui-select-match> \
+      <ui-select-choices repeat="item in items | filter: $select.search"> \
+        <div ng-bind-html="item | highlight: $select.search"></div> \
+      </ui-select-choices> \
+    </ui-select>';
+
   function isNil(value) {
     return angular.isUndefined(value) || value === null;
   }
@@ -191,6 +199,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)) {
@@ -721,6 +733,60 @@ describe('ui-select tests', function () {
     expect(getMatchLabel(el)).toEqual('false');
   });
 
+  it('should not display the placeholder when tag is selected (by default)', function () {
+    scope.items = ['tag1', 'tag2', 'tag3'];
+    scope.placeholderText = 'placeholder text';
+
+    var el = compileTemplate(multipleTagsTmpl);
+    var $select = el.scope().$select; // uiSelectCtrl
+
+    expect($select.selected).toEqual([]);
+    expect($select.getPlaceholder()).toEqual(scope.placeholderText);
+    expect(getMatchPlaceholder(el)).toEqual(scope.placeholderText); // get placeholder
+
+    clickItem(el, 'tag1');
+    expect($select.selected).toEqual(['tag1']);
+    expect(getMatchLabel(el)).toEqual(''); // empty text
+    expect(getMatchPlaceholder(el)).toEqual(''); // empty placeholder
+
+    clickItem(el, 'tag2');
+    expect($select.selected).toEqual(['tag1', 'tag2']);
+    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 () {
+    scope.items = ['tag1', 'tag2', 'tag3'];
+    scope.placeholderText = 'placeholder text';
+
+    var el = compileTemplate(multipleTagsTmpl);
+    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 <ui-select-multiple is appended inside the library
+     * This override closes #1796
+     */
+    $select.getPlaceholder = function() {
+      return $select.placeholder;
+    };
+
+    expect($select.selected).toEqual([]);
+    expect(getMatchLabel(el)).toEqual('');
+    expect(getMatchPlaceholder(el)).toEqual(scope.placeholderText);
+
+    clickItem(el, 'tag1');
+    expect($select.selected).toEqual(['tag1']);
+    expect(getMatchLabel(el)).toEqual(''); // empty text
+    expect(getMatchPlaceholder(el)).toEqual(scope.placeholderText); // show placeholder
+
+    clickItem(el, 'tag2');
+    expect($select.selected).toEqual(['tag1', 'tag2']);
+    expect(getMatchLabel(el)).toEqual('');
+    expect(getMatchPlaceholder(el)).toEqual(scope.placeholderText);
+  });
+
   it('should close an opened select when another one is opened', function () {
     var el1 = createUiSelect();
     var el2 = createUiSelect();