Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

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

@rreitmann

Description

@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

Activity

changed the title [-]Autocomplete: Items are rearranged a short time after scrolling fast[/-] [+]autocomplete: items are rearranged a short time after scrolling fast[/+] on May 17, 2018
self-assigned this
on May 18, 2018
added
type: performanceThis issue is related to performance
P5: nice to haveThese issues will not be fixed without community contributions.
on May 18, 2018
added this to the - Backlog milestone on May 18, 2018
added
needs: investigationThe cause of this issue is not well understood and needs to be investigated by the team or community
on May 18, 2018
Splaktar

Splaktar commented on May 18, 2018

@Splaktar
Contributor

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.

removed their assignment
on May 18, 2018
changed the title [-]autocomplete: items are rearranged a short time after scrolling fast[/-] [+]autocomplete: delay in rendering items when scrolling quickly via mouse wheel or touch[/+] on May 18, 2018
rreitmann

rreitmann commented on May 18, 2018

@rreitmann
Author

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.

added
P4: minorMinor issues. May not be fixed without community contributions.
and removed
P5: nice to haveThese issues will not be fixed without community contributions.
on May 19, 2018
Splaktar

Splaktar commented on May 19, 2018

@Splaktar
Contributor

@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

rreitmann commented on May 23, 2018

@rreitmann
Author

@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

Splaktar commented on May 26, 2018

@Splaktar
Contributor

@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

rreitmann commented on May 27, 2018

@rreitmann
Author

@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

rreitmann commented on May 28, 2018

@rreitmann
Author

@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

rreitmann commented on Jun 8, 2018

@rreitmann
Author

@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

rreitmann commented on Jun 8, 2018

@rreitmann
Author

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

rreitmann

rreitmann commented on Jul 23, 2018

@rreitmann
Author

@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

Splaktar commented on Jul 31, 2018

@Splaktar
Contributor

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

added
BlockedProgress on this issue is blocked. Primarily used for PRs that are blocked by presubmit feedback.
and removed
needs: investigationThe cause of this issue is not well understood and needs to be investigated by the team or community
on Jul 31, 2018
Suvarnni

Suvarnni commented on Jan 28, 2019

@Suvarnni

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

Suvarnni commented on Feb 5, 2019

@Suvarnni

Is there any progress for this Issue ?

Splaktar

Splaktar commented on May 10, 2019

@Splaktar
Contributor

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    BlockedProgress on this issue is blocked. Primarily used for PRs that are blocked by presubmit feedback.P4: minorMinor issues. May not be fixed without community contributions.browser: Androidbrowser: Chrometype: performanceThis issue is related to performance

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @Splaktar@rreitmann@Suvarnni

        Issue actions

          autocomplete: delay in rendering items when scrolling quickly via mouse wheel or touch · Issue #11283 · angular/material