question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Autocomplete slow to update with large data sets after material beta 12

See original GitHub issue

Bug, feature request, or proposal:

When displaying an autocomplete list with a large number of options it is slow to display. It appears that this is caused by 2 event listeners being created for each item in the list. This slowness started after updating to beta 12.

You can see the large number of event listeners being set up if you open the Chrome dev tools and set the logging level to verbose. [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

What is the expected behavior?

Similar performance when using autocomplete with 200+ data sets to older versions of material.

What is the current behavior?

Rendering an autocomplete with a large number of options has a delay, it is even longer when the dev tools are open due to the large number of event listeners being created causing logs to be written to the console

What are the steps to reproduce?

Open dev tools, set console logging to verbose and click the “Click to toggle autocomplete” button . You can also see the behavior by filtering the list, type anything to shorten the length of the list, then clear the input and new event listeners will be created again for each item in the list causing additional slowdown. https://plnkr.co/edit/QhlHy7FrlvQbDeRfncCo?p=preview

What is the use-case or motivation for changing an existing behavior?

Improve performance. Is it not possible to have a single event listener on the parent that catches click events that bubble up? If not do 2 event listeners need to be created for each item in the list?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: 4.4.4 Material: beta.12 All browsers

Is there anything else we should know?

Event handler times on beta.11 Clearing out the input box, causing all items to be displayed again [Violation] 'input' handler took 187ms Clicking the button to display the autocomplete [Violation] 'click' handler took 246ms

Event handler times on beta.12 doing the same actions [Violation] 'input' handler took 1347ms [Violation] 'click' handler took 1048ms

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:15
  • Comments:17 (4 by maintainers)

github_iconTop GitHub Comments

9reactions
radoslavpetranovcommented, Oct 13, 2017

I just spent 2 hours trying to figure out if I broke something performance-related somewhere after updating from material beta.8 to beta.12. I was comparing the performance between the app on prod and the newly updated dev version and my country autocomplete is definitely causing noticeable lag in beta.12.

I have some form arrays where each internal form object contains a country autocomplete (so a whole bunch of options) and adding a few of these autocompletes is making the page really slow.

I also see thousands upon thousands of these messages

[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
3reactions
Swooxcommented, Feb 2, 2018

@mikeomeara1 cheers this solve the issues I had.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Autocomplete slow to update with large data sets after ...
When displaying an autocomplete list with a large number of options it is slow to display. It appears that this is caused by...
Read more >
mat autocomplete is too slow while loading large data
I am using mat autocomplete https://material.angular.io/components/autocomplete/api in my angular project. while loading large data with 25k ...
Read more >
MdSelect and MdAutocomplete slow initial render w ... - GitHub
MdSelect and MdAutocomplete slow initial render w/ large number of options ... Autocomplete slow to update with large data sets after material beta...
Read more >
Release Notes for Beta Channel - Microsoft Learn
The chart will automatically update to capture all data when the array recalculates, rather than being fixed to a specific number of data...
Read more >
React MUI extremely slow performance : r/reactjs - Reddit
You need to memoize your rows in TableBody until their props change which are user and index coming from user.map , use React.memo...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found