programmatically selected option is not highlighted in ui-select

Question

angular version: AngularJS v1.3.6 http://github.com/angular-ui/ui-select : Version: 0.8.3

var p1 = { name: 'Ramesh', email: '[email protected]', age: 99 };

   $scope.people = [
            { name: 'Amalie',    email: '[email protected]',    age: 12 },
            { name: 'Wladimir',  email: '[email protected]',  age: 30 },
            { name: 'Samantha',  email: '[email protected]',  age: 31 },
            { name: 'Estefanía', email: 'estefaní[email protected]', age: 16 },
            { name: 'Natasha',   email: '[email protected]',   age: 54 },               
            { name: 'Adrian',    email: '[email protected]',    age: 21 },
            p1
        ];

 $scope.people.selected = p1 ;

html:

  <ui-select  class="full-width-select select" ng-model="people.selected" theme="select2">
                <ui-select-match  allow-clear="false">{{$select.selected.name}}</ui-select-match>
                <ui-select-choices repeat="person in people | filter:$select.search">
                    <div ng-bind-html="person.name | highlight: $select.search"></div>
                </ui-select-choices>
            </ui-select>

Issue is When p1 is selected programatically the

p1 object is not highlighted in the ui-select drop down.

Output is:

enter image description here

http://plnkr.co/edit/3mrECwGJbz2UYcrDiCha?p=preview

enter image description here

AngularJS version? Tried it and worked. Can you show your HTML? — tasseKATT
– tasseKATT, Commented Jan 26, 2015 at 8:59
Can you try to replicate it here: plnkr.co/edit/3ZQfh4S0KOA9EQm1NS7b?p=preview — tasseKATT
– tasseKATT, Commented Jan 26, 2015 at 11:31
plnkr.co/edit/3mrECwGJbz2UYcrDiCha?p=preview , click on button select Ramesh or Select John , and if you click on the select dropdown the option in the dropdown "ramesh or john" should get highlighted — praveenpds
– praveenpds, Commented Jan 26, 2015 at 12:07
Yep , It is working fine , but i suggest switch to new ui-select version is better approch — praveenpds
– praveenpds, Commented Jan 27, 2015 at 16:19
Good :) Please accept the answer to mark the question as answered, or if you feel the answer was not enough, provide one yourself. As long as it will not remain as unsolved :) — tasseKATT
– tasseKATT, Commented Jan 27, 2015 at 16:23

tasseKATT · Accepted Answer · 2015-01-26 18:06:44Z

5

This is due to the following change in AngularJS 1.3.1:

$observe: check if the attribute is undefined

Ui-select uses $observe to set a default value for resetSearchInput:

attrs.$observe('resetSearchInput', function() {
  var resetSearchInput = scope.$eval(attrs.resetSearchInput);
  $select.resetSearchInput = resetSearchInput !== undefined ? resetSearchInput : true;
});

But since the change noted above and since resetSearchInput is undefined, the observer function will never get executed.

To solve it for now add the following attribute to your ui-select element:

reset-search-input="'false'"

Demo: http://plnkr.co/edit/M0pXrN3n6CBjjoJXS4df?p=preview

edited Jan 26, 2015 at 18:06

answered Jan 26, 2015 at 17:45

tasseKATT

38.5k8 gold badges87 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

waxingsatirical Over a year ago

but your Plunk works fine even without the reset-search-input attribute? plnkr.co/edit/RlRH7T

tasseKATT Over a year ago

@waxingsatirical If you click the "Select Ramesh" button then open the drop down, Ramesh isn't highlighted. At least not for me.

Collectives™ on Stack Overflow

programmatically selected option is not highlighted in ui-select

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related