Material Select on change takes a lot of time to load

In this mutationObserverChange has being added objects on every change of materialSelect...

Check the next snapshot of next click

$('#selectType').change(function () {
        $.ajax({
            url: domainUrl + "/api/Types/" + $(this).find(":selected").val(),
            method: "GET",
            dataType: 'text'
        })
            .done(function (msg) {
                var jObj = JSON.parse(msg);
                $("#selectSubType").materialSelect("destroy");
                $("#selectSubType").empty();
                $("#selectSubType").append('<option value=""></option>');
                $.each(jObj, function (index, value) {
                    //this wrapped in jQuery will give us the current .letter-q div
                    var urii = location.protocol + '//' + location.hostname + (location.port ? ':' + location.port : '');
                    $("#selectSubType").append('<option value="' + value.Value + '">' + value.Text + '</option>');
                });
                $("#selectSubType").materialSelect();
                $("#selectSubType").parent().find('input')
                    .val("")
                    .removeAttr('readonly')
                    //.attr("placeholder", "Είδος Ακινήτου 1")
                    .prop('required', true);

            })
            .fail(function (jqXHR, textStatus) {
                //alert("Request failed: " + textStatus);
            });
    });

It stops to 814 changes !!!!

                key: "bindEvents",
            value: function() {
                var t = this;
                //this.bindMutationObserverChange(),
                    this.view.isEditable && this.view.isSearchable && this.view.bindResetButtonClick((function () {
                    return t._resetSelection()
                })), this.view.bindAddNewOptionClick(), this.view.bindMaterialSelectFocus(), this.view.bindMaterialSelectClick(), this.view.bindMaterialSelectBlur(), this.view.bindMaterialOptionsListTouchstart(), this.view.bindMaterialSelectKeydown(), this.view.bindMaterialSelectDropdownToggle(), this.view.bindToggleAllClick((function(e) {
                    return t._toggleSelectedValue(e)
                })), this.view.bindMaterialOptionMousedown(), this.view.bindMaterialOptionClick((function(e) {
                    return t._toggleSelectedValue(e)
                })), !this.view.isMultiple && this.view.isSearchable && this.view.bindSingleMaterialOptionClick(), this.view.isSearchable && this.view.bindSearchInputKeyup(), this.view.bindHtmlClick(), this.view.bindMobileDevicesMousedown(), this.view.bindSaveBtnClick()
            }
        }, {

I comment this.bindMutationObserverChange() and the infinite loops stoped !!!

Hi @Vasileios Valasidis,

I am really sorry that you are facing issues with our Material Select component. I've tried to crash your site by randomly checking and unchecking all of your selects and I have to say that your site works incredibly fast for me.

What I found is that in your Region/Country code you are destroying a material select with .mdb-select selector instead of #selectArea which can be a source of corruption of this select. Please check this first.

Regards, Marcin

        function e(n) {
        $.ajax({
            url: domainUrl + "/api/Types/" + n.find(":selected").val(),
            method: "GET",
            dataType: "text",
            async: !0
        }).done(function(n) {
            var i = JSON.parse(n), r = JSON.parse(textLocalised), t;
            for ($("#selectSubType").materialSelect("destroy"),
            $("#selectSubType").empty(),
            $("#selectSubType").append('<option value="" disabled>' + r.subType + "<\/option>"),
            t = 0; t < i.length; t++)
                $("#selectSubType").append('<option value="' + i[t].Value + '">' + i[t].Text + "<\/option>");
            $("#selectSubType").materialSelect()
        }).fail(function() {})
    }
    function o(n) {
        $.ajax({
            url: domainUrl + "/api/GetAreas/" + n.val(),
            method: "GET",
            dataType: "text",
            async: !0
        }).done(function(n) {
            var i = JSON.parse(n), r = JSON.parse(textLocalised), t;
            for ($("#selectArea").materialSelect("destroy"),
            $("#selectArea").empty(),
            $("#selectArea").append('<option value="" disabled>' + r.subArea + "<\/option>"),
            t = 0; t < i.length; t++)
                $("#selectArea").append('<option value="' + i[t].Value + '">' + i[t].Text + "<\/option>");
            $("#selectArea").materialSelect()
        }).fail(function() {})
    }

This the change that I did it to mdb.js to work ... without this change mutationobserver is called multiple times.

key: "bindEvents",
        value: function() {
            var t = this;
            //this.bindMutationObserverChange(),
                this.view.isEditable && this.view.isSearchable && this.view.bindResetButtonClick((function () {
                return t._resetSelection()
            })), this.view.bindAddNewOptionClick(), this.view.bindMaterialSelectFocus(), this.view.bindMaterialSelectClick(), this.view.bindMaterialSelectBlur(), this.view.bindMaterialOptionsListTouchstart(), this.view.bindMaterialSelectKeydown(), this.view.bindMaterialSelectDropdownToggle(), this.view.bindToggleAllClick((function(e) {
                return t._toggleSelectedValue(e)
            })), this.view.bindMaterialOptionMousedown(), this.view.bindMaterialOptionClick((function(e) {
                return t._toggleSelectedValue(e)
            })), !this.view.isMultiple && this.view.isSearchable && this.view.bindSingleMaterialOptionClick(), this.view.isSearchable && this.view.bindSearchInputKeyup(), this.view.bindHtmlClick(), this.view.bindMobileDevicesMousedown(), this.view.bindSaveBtnClick()
        }
    }, {

Please I would like to take notice of this change in case of update mdb.js of PRO version

Please see the snippet for the other support question where problems were similar to your situation. https://mdbootstrap.com/snippets/jquery/grzegorz-bujanski/2617166

Here the data-stop-refresh='true' is used on the select element to disable the functionality of bindMutationObserverChange. Additionally, you can see that every change made to the material select needs to be followed by the again initialization of the select.

In your code, I saw some functions changing material select element without initializing it again, e.g here where you update the material select element, and force its parent element to change, which unfortunately triggers mutationObserver:

 function f() {
        var n = JSON.parse(searchData);
        $.ajax({
            url: domainUrl + "/api/GetAreas/" + $("#selectParentArea").find(":selected").val(),
            method: "GET",
            dataType: "text"
        }).done(function(t) {
            var i = JSON.parse(t);
            $("#selectArea").empty();
            $("#selectArea").append('<option value=""><\/option>');
            $.each(i, function(t, i) {
                var r = i.Value == n.SubArea ? "selected" : "";
                $("#selectArea").append('<option value="' + i.Value + '" ' + r + ">" + i.Text + "<\/option>")
            });
            $("#selectParentArea").change()
        }).fail(function() {})
    }

Please try to use data-stop-refresh='true' along with reinitializing material select each time you make the dynamic change to it and see if it makes any change to your page.

Regards, Marcin