search

angular / material

Material design for AngularJS
https://material.angularjs.org/
MIT License
16.55k stars 3.39k forks source link

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

Open rreitmann opened 6 years ago

rreitmann commented 6 years ago

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?

Splaktar commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

@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

Splaktar commented 6 years ago

@rreitmann ng-stats was quite helpful in measuring your digest times (it looks like it might be broken after AngularJS 1.6.3). In AngularJS, they still happen when the app is idle. Either way, this delay should be reduced a bit if you can reduce the number and cost of watchers in your app to bring the digest times back under 15ms or so.

rreitmann commented 6 years ago

@Splaktar I will check whether I can reduce the digest time. However I am pretty sure that this will not help since your docs app has the same issue. I have just reproduced it with my Galaxy S2 Tab as well. Here is a screen video showing the issue: https://photos.app.goo.gl/OOA9lrobmP0FbrBs2

rreitmann commented 6 years ago

@Splaktar I have just checked this issue with firefox and samsung internet on my mobile. They do not have a delay at all. This could be a chrome issue...

rreitmann commented 6 years ago

@Splaktar I have just installed chrome-dev-channel version 68.0.3440.15 (Offizieller Build) dev (64-Bit) on my ubuntu and it does perform much better. The very slight delay of 200-400ms cannot be reproduced anymore. I will do the same test on my Samsung Device when I get home.

rreitmann commented 6 years ago

@Splaktar On my mobile I have tested with chrome dev 69.0.3452.0. That version still has the issue...

rreitmann commented 6 years ago

@Splaktar I have filed a chromium bug for this: https://bugs.chromium.org/p/chromium/issues/detail?id=863672

They have reproduced the bug. Hope they have an idea how to fix this...

Splaktar commented 6 years ago

@rreitmann glad to hear that they can reproduce it. I added my ⭐️ 😁

Suvarnni commented 5 years ago

I'm facing similar issue when then loading the values to autocomplete on the very first time. I'm running my application in both IE and chrome in both facing same issue. (Almost I have 1000 records in each autocomplete control). Kindly tell me when this issue will be resolved

Suvarnni commented 5 years ago

Is there any progress for this Issue ?

Splaktar commented 5 years ago

@Suvarnni The Chrome for Android bug tracking this (https://bugs.chromium.org/p/chromium/issues/detail?id=863672) was assigned, but it doesn't look like the Chromium team has started any work on it.

You are mentioning IE in addition to Chrome? If you are seeing an issue on desktop, please open a new issue with a CodePen reproduction and link to this issue.