5

The issue is that when you have a ui-select in an angular project where ngAnimate is used and click on it to type something in, you aren't able to type until you click on the input element a second time. Basically, it seems to only focus on the second click.

This seems to be an issue with the bootstrap theme and not having any items in the list.

http://plnkr.co/edit/jqXDJLN33U75EO9imGER?p=preview

  <ui-select ng-model="country.selected" theme="bootstrap" ng-disabled="disabled" style="width: 300px;">
    <ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="country in countries | filter: $select.search">
      <span ng-bind-html="country.name | highlight: $select.search"></span>
      <small ng-bind-html="country.code | highlight: $select.search"></small>
    </ui-select-choices>
  </ui-select>


var app = angular.module('selectizeDemo', [
  'ngAnimate',
  'ngSanitize', 
  'ui.select'
  ]);

app.controller('MainCtrl', function($scope) {

    $scope.countries = [];

  /*$scope.countries = [ 
    {name: 'Afghanistan', code: 'AF'},
    {name: 'Åland Islands', code: 'AX'},
    {name: 'Albania', code: 'AL'},
    {name: 'Algeria', code: 'DZ'},
    {name: 'American Samoa', code: 'AS'},
    {name: 'Andorra', code: 'AD'},
    {name: 'Angola', code: 'AO'},
    {name: 'Anguilla', code: 'AI'},
    {name: 'Antarctica', code: 'AQ'},
    {name: 'Antigua and Barbuda', code: 'AG'}];*/
});

As you can see, if you add items to the list, or change the theme to selectize, it works as intended.

Is there some way to work around this?

TomSlick
  • 717
  • 5
  • 21
  • You may look at this issue https://github.com/angular-ui/ui-select/issues/859#issuecomment-132411374 – Hmahwish May 06 '16 at 13:28
  • Thank you, I hadn't seen that thread, but the issue still persists with the above conditions: ngAnimate 1.5, bootstrap theme, empty list. – TomSlick May 06 '16 at 13:34

0 Answers0