autocomplete: delay in rendering items when scrolling quickly via mouse wheel or touch

[rreitmann]

When you scroll down the virtual-repeat-container of an autocomplete by using the mousewheel or slide fast up or down on a touch device you see the items in the virtual-repeat-container are rearranged a short time after the scrolling stopped. The "short time" is bigger on mobile devices so that the users click on the wrong entry.

Steps to reproduce the issue:

Go to https://material.angularjs.org/1.1.9/demo/autocomplete#basic-usage and focus the first autocomplete. Move the mouse over the list of states and scroll down fast with the mousewheel or swipe down fast. You should see that the displayed states are changed a short while after the scrolling stopped. This does not happen when you scroll the list by dragging the scroll bar.

In our app this can be seen here:
Go to https://metadatamanagement-dev.cfapps.io/#!/en/search?page=1&type=data_sets&variable=var-gra2005-ds1-pid$ and clear the autocomplete (variable filter). Scrolling up and down the list with the mouse wheel demonstrates the behavior.

The code for that app can be found here:
https://github.com/dzhw/metadatamanagement

What is the expected behavior?

There should be no difference to dragging the scroll bar. A short delay for updating the virtual-repeat-container which is visible to the user confuses the users.

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: 1.7.0
• AngularJS Material: 1.1.9
• OS: Ubuntu, Android
• Browsers: Chrome

[Splaktar]

I investigated this a bit and it doesn't appear to be reproducible in virtual repeat outside of autocomplete.

I can see this behavior in autocomplete though. There seems to be a very slight delay of 200-400ms when updating the elements after a mouse wheel scroll. This doesn't occur when the scroll bar is used. This delay may be worse in applications with a very long digest cycle.

This doesn't seem to be specific to AngularJS 1.7 as it can be reproduced with 1.6.9.

[rreitmann]

I agree that on desktops the delay is about 200-400ms however on my mobile (Samsung Galaxy S7) it is 1-2 seconds which leads to clicks on the wrong item.

[Splaktar]

@rreitmann ouch, that is indeed painful. That's in your app or on the AngularJS Material autocomplete docs?

If it's in your app, do you have any idea what the digest time is when idle in your app?

[rreitmann]

@Splaktar It is in our app as well as in the angularjs material docs. I have recorded a CPU profile in our app (on my desktop machine). I cannot see any digest calls when the app is idle. When the autocomplete is used the digest times are ~30 ms...

Profile-20180523T110005.json.zip