javascriptangularjsui-select

Problem with ui-select with multiple and async options

I have a problem with the ui-select directive (AngularJS 1.6.4, Ui-select 0.19.8).
I have created the fiddle here.

It's supposed to show contacts in the dropdown I if type more than 3 chars. (I don't even try to filter anything at the moment, the same list of contacts is returned). It works well the first time, then the other times no dropdown is shown.

I use the async way of returning results so it calls my "refresh" function after 1sec.

Can someone help me understand why no dropdown is displayed after the first time ?

(also, if someone knows why I need to force the display: block for the <ul> tag - cf CSS )

Thanks

HTML

<body ng-app="myApp">
  <div body ng-controller="ctrl as ctrl">

    <div class="element">
      Selected Contacts:<br>
      <div ng-repeat="contact in ctrl.contacts" class="contact">
        {{ contact }}
      </div>
    </div>

    <ui-select multiple ng-model="ctrl.contacts" class="element">
      <ui-select-match placeholder="Pick one...">{{$item}}</ui-select-match>
      <ui-select-choices
                         position="down"
                         refresh="ctrl.refreshContacts($select.search)"
                         refresh-delay="1000"
                         minimum-input-length="3"
                         repeat="person in ctrl.people">
        <div ng-bind-html="person | highlight: $select.search"></div>
      </ui-select-choices>
    </ui-select>

    <div class="element">
      <div ng-repeat="log in ctrl.logs track by $index" >
        <div>
          {{log}}
        </div>
      </div>
    </div>
  </div>
</body>

JS

var myApp = angular.module('myApp',  ['ngSanitize','ui.select']);

myApp.controller("ctrl", [function () {

  var ctrl = this;
  ctrl.logs=[];
  ctrl.refreshContacts = function(search) {
    var people = [
      "mickael",
      "pierre",
      "anna",
      "alice",
      "bob"
    ];
    ctrl.people = people;
    ctrl.logs.push("refreshContacts called")
  }

  ctrl.people = [];

}]);

CSS

.element {
  margin-bottom: 20px;
}

.contact {
  display: inline-block;
  margin: 5px;
  padding: 5px 8px;
  background: grey;
}

/* why do I need this ?! */
.ui-select-choices {
  display: block;
}
Solution

  • If I am remembering correctly there is a bug when using both minimum-input-length and refresh. I solved this problem by removing minimum-input-length and adding an if statement inside refresh function.

    ctrl.refreshContacts = function(search) {
    if(search == undefined || search.length < 3){
        return;
    }
    else{
      people = [
        "mickael",
        "pierre",
        "anna",
        "alice",
        "bob"
      ];
      ctrl.people = people;
    }
  }