Material Select Endless Loop Issue

Topic: Material Select Endless Loop Issue

dngu3355 asked 4 years ago

Hi,

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';

  MaterialSelect.clearMutationObservers();
  MaterialSelect.mutationObservers.push(observer);
}

Hoping for your kind assistance. Thank You.

Add comment

Grzegorz Bujański staff answered 4 years ago

1 0 Best answer

Try the solution from this snippet: https://mdbootstrap.com/snippets/jquery/grzegorz-bujanski/2014875#js-tab-view

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

Hi,

This worked! Thank you so much.

Grzegorz Bujański staff commented 4 years ago

You're welcome.

Add comment

Grzegorz Bujański staff answered 4 years ago

0 0 Best answer

Hi.

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

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

Add comment

dngu3355 answered 4 years ago

0 0 Best answer

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