imevro / ng-selectize

AngularJS directive for Selectize.js
39 stars 10 forks source link

Runs into infinite loop! #10

Open iamawebgeek opened 8 years ago

iamawebgeek commented 8 years ago

When I select an options in a selectize field, my browser is down, because of the infinite loop which is caused by your code. After 15 minutes of debugging I found out what is happening. Watch these lines:

// LINE 136
scope.$parent.$watch(attrs.ngModel, setSelectizeValue);
// LINES 28-31
selectize.on('change', function() {
    setModelValue(selectize.getValue());
});

The problem here is that when a selectize changes its value you indicate to run a ng-model's value changing function. In another side of your script you watch the ngModel attribute and on its change you fire selectize's value changing function which causes triggering change event and you know... it loops if it can. I know that it is actually a problem of selectize.js (I WOULD HAVE BEEN HAPPY TO USE SELECT2 INSTEAD OF THIS PLUGIN, BUT PROJECT REQUIRES TO), anyway I am using version 0.10.4 which is one of the latest. UPD: I found out that you perform value checks, but it is inside of a timeout and as you may know the function is invoked asynchroniously. My current workaround is removing timeout. UPD 2: My fix suggestion:

// REPLACE setSelectizeValue function on line 92 to
function setSelectizeValue(value) {
    var values = parseValues(value);

    if (changing || values === parseValues(selectize.getValue())) {
        return;
    }
    changing = true;

    timeout(function() {
        selectize.setValue(values);
        storeInvalidValues(values, parseValues(selectize.getValue()));

        changing = false;
    });
}

Sorry for my laziness about creating a pull request.

yakovkhalinsky commented 8 years ago

Thanks @iamwebdesigner for reporting and having a bit of a dig.

The timeout which is the Angular $timeout was originally added to avoid the dreaded $digest already in progress error.

Can you provide me with a set of source files that I can reproduce your error with? I'll try and have a look in the next day or so.

iamawebgeek commented 8 years ago

Check on jsbin After you select second option it dies hard. Check my second update also.

michi88 commented 6 years ago

I had to move changing = true; inside of the timeout for the suggested fix to work.