md-autocomplete. Selected item not updated when using mouse

[CuthbertJungle]

to recreate. navigate to here. https://material.angularjs.org/#/demo/material.components.autocomplete

type 'a' in the search box
Using the mouse click on 'Arizona'
The selected text is not updated to state 'Arizona', it stays at 'a'

If you use the 'return' keyboard key to select an item, the selected text is updated to the selection correctly.

[ThomasBurleson]

Also reported by @kyleledbetter -

The input doesn't seem to be updating when you make a selection from the dropdown:

tested Chrome 40.0.2214.111 & Safari 8.0.3 (10600.3.18)

[ilianaza]

+1

[tsdaemon]

+1

[bricejulia]

+1

[rrharvey]

@robertmesserle I submitted a PR for this.

[PaulMougel]

Ref #1527.

[cauealvesbraz]

Hello Thomas, how are you?

You called the "md-item-text" property? She is responsible for inserting the selected item in input

e.g

<md-autocomplete
md-items="item in getAllItems()"
md-item-text="item.display"
<span md-highlight-text="searchText">{{item.display}}</span>
</md-autocomplete>

I think this may help.

[swati615]

If you set md-item-text="item.display" then the text is set correctly but the request for autocomplete is fired again because the search text is updated. This shows the dropdown again.

When an item from the drop down is selected, the autocompletion should not happen again

[cauealvesbraz]

Hello, swati615.

Naturally this does not occur, it may be something in your code. You would show it, please?

[swati615]

This occurs when there are two options in the dropdown where one is a substring of the other.

<md-autocomplete md-selected-item="selectedItem" 
                               md-search-text="searchText"
                               md-items="item in getMatches(searchText)" 
                               md-selected-item-change="onItemChanged()"
                               md-item-text="item"
                               placeholder="Search" style="margin-bottom: 20px;">
                    <span md-highlight-text="searchText">{{item}}</span>
 </md-autocomplete>

$scope.getMatches = function () {
              var results = ['Apple', 'Apple is a fruit']
              return results;
 }

[guilhermevrs]

+1

[blasterbug]

+1

[marceloavan]

+1

[rmsmq]

I was having this same issue and it turns out that it was during the async md-items event that returns the list of autocomplete matches, which seems to fire on click of an autocomplete suggestion. I had an array of autocomplete suggestions that I was clearing every time the md-item event fired before triggering the async call. By moving the clear into the return of the async call this fixed the problem. e.g. I previously had;

scope.locationKeyDown = function(input) {
    typeAheadLocations.length = 0;
    var returnArray = $q.defer();
    $q.all([projectsPromise(input), googleLocationPromise(input)])
        .then(function(response) {
            for (var i=0; i < response.length; i++) {
                 typeAheadLocations = typeAheadLocations.concat(response[i]);
            }
            returnArray.resolve(typeAheadLocations);
      });
      return returnArray.promise;
};

and changed it too -

scope.locationKeyDown = function(input) {
    var returnArray = $q.defer();
    $q.all([projectsPromise(input), googleLocationPromise(input)])
        .then(function(response) {
            typeAheadLocations.length = 0;
            for (var i=0; i < response.length; i++) {
                 typeAheadLocations = typeAheadLocations.concat(response[i]);
            }
            returnArray.resolve(typeAheadLocations);
      });
      return returnArray.promise;
};

where my projectsPromise and googleLocationsPromise are just serpeate async calls. This may not be THE cause of the issue, but it fixed things for me, and I hope it helps someone else.