Material: md-autocomplete not giving correct result with mouse click

[saumitra619]

Actual Behavior:

• What is the issue? * on autocomplete list sometimes mouse click select different result although is working fine if we select the item from list using up-down key with enter.
• What is the expected behavior? should select the correct item.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue:
  http://codepen.io/saumitra619/pen/yVPgxy
• Details: try to search some alphabets , then select some item from scroll down the list, sometimes it will select the different result

Angular Versions: *

• Angular Version: 1.5
• Angular Material Version: 1.1.1

Additional Information:

• Browser Type: * firefox
• Browser Version: * 51
• OS: * windows 10
• Stack Traces:

---

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[Drumarcco]

Actually, the code snippet is loading an older version of angular material, v1.00-rc4.

<script src='https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.0-rc4/angular-material.js'></script>

Would you try to reproduce the issue using the codepen shortcut?

[saumitra619]

codepen is added. please have a look ar the problem.

[Drumarcco]

@saumitra619 Apparently the issue has to do with asynchrony. On your codepen the assignment of items is ocurring on md-search-text-change and on the documentation, asynchronous items are dealt on md-items by receiving an expression such as md-items="item in ctrl.searchQuery(ctrl.searchText)" where searchQuery returns a promise to be handled by the directive, but somehow I'm having issues with it too.

http://codepen.io/Drumarcco/pen/GNyxKr

This is the stacktrace:

console_runner-5710c30….js:1 TypeError: Cannot read property 'length' of undefined
    at hasMatches (angular-material.js:22791)
    at shouldHide (angular-material.js:22756)
    at setLoading (angular-material.js:22748)
    at handleAsyncResults (angular-material.js:22925)
    at fetchResults (angular-material.js:22918)
    at handleQuery (angular-material.js:23021)
    at angular-material.js:22583
    at processQueue (angular.js:15961)
    at angular.js:15977
    at Scope.$eval (angular.js:17229)

[saumitra619]

@ Drumarcco thanx for the reply,i am not having any problem with the code, problem lies with the mouse click event sometimes it select the wrong item if i scroll through the long list.if i do same thing with keyboard arrow key and enter i get correct result.

[rcevs]

I guess this is because the autocomplete is listing the results for the previous query. This might be related with issue 6554.

[saumitra619]

@rcevs please have a look at codepen. Sometimes i am getting different result with mouse click, but with keyboard up-down + enter select the correct results.

[rcevs]

Hi @saumitra619.

As stated by @Drumarcco, you could try the following:

1.- Remove the md-search-text-change directive.
2.- Inside the md-items directive replace item in ctrl.data with item in ctrl.querySearch(ctrl.searchText).
3.- Inside your querySearch function return the $http promise (not only the response).
4.- If no results were found, return an empty array (also don't forget to add the md-not-found tag inside the autocomplete directive).

Check out the CodePen.

[saumitra619]

@Drumarcco @rcevs issue resolved finally thank your help, i really appreciate it.

p.s. i didn't remove the md-search-text-change directive as this function returning me the json object of select item