Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Material Select's abysmal performance

Legay free asked 5 years ago


Expected behavior

I have 9 instances of material select in one form. One instance has over 100 time zones. Binding my model to the UX should not freeze the browser.

Actual behavior

After running a performance session in Chrome, binding my model using $.val() to set the material select values takes 2.5 secs, during which the browser window freezes. This is is on a quad-core i7 laptop with 16GB RAM. That is insane.

Resources (screenshots, code snippets etc.)

I traced this to the $.val function re-rendering the entire component, including all of its options. I fail to see why that is necessary. The component itself should stay unchanged, and only its state should be modified to reflect the newly selected value.

Honestly, I have found so many bugs related to this component so far, I am baffled that it was deemed production-quality by your team.


Piotr Glejzer staff commented 5 years ago

Yes, this is weird behavior with this rendering, I added task about that. Which bugs do you talking about?


Ian G. Morris free answered 5 years ago


I have also had issues with dynamically updated select while instanciating it multipe times as well as destorying and rebuilding. Removing material_select from the site dropped my load time from 10sec to ~1sec.

I also create and destory an instance each time a fullcalendar click happends. a modal is fired and the user can add event information. each time I call the modal, I destroy, rebuild the option list, and call material_select again. with each full calendar click I get an increase in execution time by ~250ms. Very quickly the user is waiting 1,2,5,10 sec for the click to appear to register.

This drop down menu is the best! Please fix!


Piotr Glejzer staff commented 5 years ago

We still working on it, it is our task to do. Sorry about that.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.7.7
  • Device: laptop
  • Browser: Chrome
  • OS: Win 10
  • Provided sample code: No
  • Provided link: No