The selected option is not visually highlighted in the ui-select due to a programming issue

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: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f6979b979a9f93b6939b979f9ad895999b">[email protected]</a>',    age: 12 },
            { name: 'Wladimir',  email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d0a7bcb1b4b9bdb9a290b5bdb1b9bcfeb3bfbd">[email protected]</a>',  age: 30 },
            { name: 'Samantha',  email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8dfeece0ece3f9e5eccde8e0ece4e1a3eee2e0">[email protected]</a>',  age: 31 },
            { name: 'Estefanía', email: 'estefaní<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="016041646c60686d2f626e6c">[email protected]</a>', age: 16 },
            { name: 'Natasha',   email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b353a2f3a28333a1b3e363a323775383436">[email protected]</a>',   age: 54 },               
            { name: 'Adrian',    email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="432227312a222d03262e222a2f6d202c2e">[email protected]</a>',    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:

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

javascriptangularjsui-select2ui-select

Answer №1

This issue arose due to a recent update in AngularJS version 1.3.1:

$observe: now checks if the attribute is undefined

Ui-select utilizes the $observe function to establish a default value for resetSearchInput:

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

However, with the recent change as mentioned above and the fact that resetSearchInput remains undefined, the observer function will not be triggered.

To temporarily resolve this issue, include the following attribute in your ui-select element:

reset-search-input="'false'"

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Enhance your Vue components with a directive to customize or adjust element attributes

I have a variety of elements structured like this: <some-custom-component :errors="formErrors.has(getErrorKey('town'))" :error-messages="formErrors.getAll(getErrorKey('town'))" ></some-custom-component> The formErrors ...

javascriptvue.js

Using React.js to create a search filter for users

When using useEffect with fetch(api) to set [search], I encounter an issue where "loading..." appears each time I enter something in the input box. To continue typing, I have to click on the box after every word or number. I am seeking advice on how to pr ...

javascriptreactjs

Setting session expiration for an HTML page in MVC with JavaScript - A step-by-step guide

I'm working on a HTML page within an MVC framework that includes a button click function. I'm trying to figure out how to redirect the user to the login page if the page remains idle for 30 minutes. I've attempted using the code snippet belo ...

javascripthtmlasp.net-mvc

Guide to adding table classes to AJAX response tables

I am facing an issue with displaying data in a table based on the AJAX request made. The problem arises because the data displayed does not follow the pagination classes applied to the table. My table has pagination functionality where 10 records are shown ...

javascriptphpjquerymysqlajax

Conditionally submit a form using JQuery

I need to implement a validation condition using jQuery for a form submit button. The requirement is that the form should only be submitted if the user enters a valid email address. HTML code : <form method="post" action="{% url sportdub.views.login ...

javascriptjqueryhtml

There seems to be an issue with AJAX form submission and it is not functioning properly

Having trouble submitting a form to another page using ajax, as it is not sending the post request. I have included Javascript at the top of the page: <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script> $(function(){ ...

javascriptajax

Upgrading React Native hot reloading leads to a complete reload of the application

Recently, I updated my React Native app from version 0.48 to 0.55. Unfortunately, after the upgrade, hot reloading stopped functioning. Any modifications to the files now trigger a complete reload of the app. I have attempted clearing all cache related to ...

javascriptreactjsreact-native

What makes Angular date pickers sluggish?

Have you ever noticed that Angular JS date pickers consume a lot of CPU? When multiple date pickers are present on a page, they can noticeably reduce the site's speed. Is there a way to minimize this issue? Take for example the official Angular for ...

javascriptangularjsdatepickerbootstrap-datepicker

What is the method for assigning a string to module variable definitions?

As someone new to TypeScript and MVC, I find myself unsure if I am even asking the right questions. I have multiple TypeScript files with identical functionality that are used across various search screens. My goal is to consolidate these into a single fil ...

javascripttypescriptmodel-view-controller

"Unlocking the power of Bootstrap modals in Django

Using Django, I have a loop of div elements. When I click on a div, I want a modal to be displayed. Here is my HTML code: {% for object in theobjects %} <div class="row" style="margin-top:0.5%;"> <div name="traitement" <!-- onclic ...

javascriptjquerycssdjangotwitter-bootstrap

Converting a floating point number to a 4-byte hex string in JavaScript and reversing the process

I have received a hexadecimal data from the server side that is supposed to be in float format. I am trying to convert these hexadecimals into floats using JavaScript, but so far I have been unable to find a suitable method. Can anyone provide assistance ...

javascripthexbyte

The current version of HTML5 Context Menus is now available

I'm in need of implementing the HTML5 Context Menu feature. Currently, only Firefox supports it. My main objective is to add some menu options without replacing the existing context menu. How can I achieve the same functionality now? I am aware of va ...

javascripthtmlcontextmenu

Attempting to invoke setState on a Component before it has been mounted is not valid - tsx

I've searched through various threads regarding this issue, but none of them provided a solution that worked for me. Encountering the error: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a b ...

javascriptreactjstypescriptreact-tsx

Discover the Magic of CSS Animation

I am not experienced in CSS animations and have limited knowledge about animations. I am trying to create an animation where a grey box slides down from the top line above the login/register section, but currently it only fades in. If anyone can provide an ...

javascripthtmlcssanimationcss-animations

I am having trouble retrieving images on my website and displaying URL images

Every time I attempt to retrieve an image URL from the database for the client, I encounter the following error: Refused to load the image 'https://nuclear-photos.s3-ap-southeast-1.amazonaws.com/…22:33:44%20GMT+0400%20(GST)TEST.png' because i ...

javascriptmeteoramazon-s3cross-domain

Guide on implementing asyncWithLDProvider from Launch Darkly in your Next.js application

Launch Darkly provides an example (https://github.com/launchdarkly/react-client-sdk/blob/main/examples/async-provider/src/client/index.js) showcasing how to use asyncWithLDProvider in a React project (as shown below). However, I'm struggling to integr ...

javascriptreactjsasynchronousnext.jslaunchdarkly

Tips for disabling default browser input validation in React

https://i.stack.imgur.com/834LB.png Is there a way to remove the message "Please fill out this field" while still keeping the "required" attribute intact? I have my own validation system in place, so I need to use the "required" attribute to determine whe ...

javascripthtmlcssattributes

Ordering dates by week in AngularJS 1

Currently, I have a list of objects: [{ name: one, date: 2017-09-18 }, { name: two, date: 2017-09-11 }, { name: three, date: 2017-09-13 }] I am looking to organize this list by week. Perhaps like the following structure: { 1week(or , m ...

javascriptangularjsdate

Is there a way to merge all this data into a single Object?

This particular situation is quite complex. Let's consider the following scenario: I have two JavaScript objects that are fetched via REST calls, using two different callbacks. So, we have: call1() - POST method - parsed JSON to JavaScript object, ...

javascriptjqueryjsonnode.js

Sending specific names as properties

Looking to streamline my repetitive form inputs by abstracting them into a component, I want the following functionality: <InputElement title="someTitle" v-model="someName" @blur="someFunction" name="someName" type="someType"> The desired output wo ...

javascriptvue.js