Angular ui-select placeholder not working

Question

We have been using ui-select (https://github.com/angular-ui/ui-select) to theme dropdowns like select2. This functionality has largely been working apart from one aspect: default placeholders.

The code largely follows the ui-select demos (3rd example on this page: http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview).

As far as I'm concerned the default text should be that of the 'placeholder' attribute. Instead, it appears blank until you choose an option. We have been using a hack whereby we set the value of the ui-select-match, in the Angular controller to counter this issue, but this is far from perfect and clearly not how it should be used.

<ui-select data-ng-model="producttype.selected" theme="select2" name="product-type">
    <ui-select-match placeholder="Select a product type">
        {{$select.selected.title}}
    </ui-select-match>
    <ui-select-choices repeat="producttype in productTypeOptions | filter: $select.search">
        <span ng-bind-html="producttype.title | highlight: $select.search"></span>
    </ui-select-choices>                                               
</ui-select>

Has anyone ecountered this problem before, or have any idea as to what we are doing wrong?

Answer 1

If you're disabling search this will also hide the placeholder even when there is no selection.

The placeholder span element :

<span ng-show="$select.searchEnabled && $select.isEmpty()" class="select2-chosen ng-binding ng-hide">My Placeholder</span>

Just removed the "$select.searchEnabled &&" in the template .js file and the placeholder will appear again.

As seen on by hthabet on github

Answer 2

The issue here is with the isEmpty check in select.js file.

just replace this check

value = ctrl.selected; angular.isUndefined(value) || value === null;

with

angular.isUndefined(value) || value === null || angular.equals({}, value);

Answer 3

I ran into this problem when I had something else in the controller bound to the ng-model, like producttype.selected. The other binding would initialize the model and make the ui-select directive behave as if a choice had already been made.

If that's your problem, the on-select callback is helpful for binding the ui-select to another object, and then using merging the data you want back onto the original object.

Answer 4

Ui select doesnt work when search item closed or if the binding element is empty. The fastest way to do that adding css display:block placeholder item.

.select2-chosen{
   display: block !important;
}

Or you can edit ui-select.js.

Answer 5

You will also run into this problem if the model you are binding to is part of an object and has a key/value pair where the key exists but the value is a null.

<ui-select ng-model="vm.selectedItem.ID">....

And here is the object being referenced:

vm.selectedItem = {
  ID: null,
  description: null
}

This will result in a blank selection as well which prevents the placeholder from displaying. I'm currently working on a solution.

Answer 6

Check out the bootstrap class "text-muted" that is assigned to the placeholder. It has a property that sets the font color "white". So try to comment this property. It worked for me.

Answer 7

Instead of editing the source code, you can do two things to fix it.

1. Turn on enableSearch like following.

   $scope.enableSearch = function () { $scope.searchEnabled = true; };

2. Or check what @TDing mentioned or @Steve Ellis's answer on this post.