Topic: Material Select Endless Loop Issue

dngu3355 free asked 3 years ago


We experienced an issue where our Laravel Application freezes or crashes suddenly when switching options in the material-select. The values of the options on that material-select are dynamically generated.

We noticed that one of the reasons that the application crashes is that when dynamically updated material selection option, the bindMutationObserverChange() function of material-select.js goes into an endless loop.

The material-select.js comes from the MDB-Pro_4.18.0 package.

Please refer to the image below for the said file.

enter image description here

Also, here's the code for the said function.

bindMutationObserverChange() {

  const config = {
    attributes: true,
    childList: true,
    characterData: true,
    subtree: true
  const observer = new MutationObserver(this._onMutationObserverChange.bind(this));
  observer.observe(this.view.$nativeSelect.get(0), config);
  observer.customId = this.uuid;
  observer.customStatus = 'observing';


Hoping for your kind assistance. Thank You.

Grzegorz Bujański staff answered 3 years ago

Try the solution from this snippet:

You can check that each time you click on the get data button, select options are added and there are no performance issues.

In this snippet, I added data-stop-refresh='true' to select and after each request to Api it reinitializes select to read the changes

As for the duplicate select-wrapper bug it has been fixed in version 4.19.1.

dngu3355 free commented 3 years ago


This worked! Thank you so much.

Grzegorz Bujański staff commented 3 years ago

You're welcome.

dngu3355 free answered 3 years ago

Hi @Grzegorz Bujański,

We have tried the solution you have given, but it doesn't seem to work. It still goes into an endless loop and creates many nested elements. enter image description here

The _onMutationObserverChange() function of material-select.js still gets triggered which also causes our application to crash. enter image description here

We tried to un-initialize the material select at the beginning of the change event but it doesn't work. enter image description here

We also tried it inside a ajax call but still doesn't work. enter image description here

Grzegorz Bujański staff answered 3 years ago


Performance problems can arise when a lot of data is changed. There are two ways to prevent this.

  1. Get data from API, add to select and then initialize select.
  2. Initialize select, destroying it with $('.mdb-select').materialSelect({destroy: true});, get data and add to select, reinitialize select.

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.18.0
  • Device: PC
  • Browser: Google Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No