on-search-change event don't stop working.

[endigo]

Hello,

I change $scope.items in on-search-change event. But a event is don't stop when $scope.items changed successfully.

Here is code:
var searchTimer = undefined;
$scope.onSearchItem = function(data) {
if(searchTimer)
$timeout.cancel(searchTimer);

searchTimer = $timeout(function(){
    var selectedItems = $scope.items.filter(function(e){
        return e.isCheck;
    })
    service.findItem(data.keyword).success(function (res1) {
        $scope.items = selectedItems;
        res1.forEach(function(newItem){
            var isSelected = selectedItems.filter(function(oldItem){
                return newItem.pkId === oldItem.pkId;
            }).length > 0;
            if(!isSelected)
                $scope.items.push(newItem);
        })
    }).error(msgService.showError)                          
}, 300);

}

[isteven]

@endigo ,

Can you please replicate the bug in JsFiddler or Plunker?

[smyther]

I've also been having this issue.

Plunkr here;

http://run.plnkr.co/plunks/nmjbGQ9CQCKJKxwgdEKD/

It seems as soon as i change whatever data is bound to the input-model of the directive, it just goes off on an infinite loop until the text in the box is blank.

Any more info needed, let me know.

[isteven]

Hi @smyther ,

Thanks for replicating the problem.

From what I see, it happens because on-search-change is called when these conditions are fulllfiled:

• you update the input-model.
• search box is not empty

I'll see what I can do.

[JihadMotii-REISys]

is there any update on this issue ?
Right now, i'm using "on-search-change" and the event gets called in a loop...

Thanks !

[isteven]

@JihadMotii-REISys and all,

Apology as I don't have time to work on proper fix. Family life has been though & hectic recently.

What I can say is, since it happens because the search field is not empty, we can try to empty the search field before the input-model changes are processed.

Can you try to find these watchers in the code, and insert this line:

// watch1, for changes in input model property
// updates multi-select when user select/deselect a single checkbox programatically
// https://github.com/isteven/angular-multi-select/issues/8

$scope.$watch( 'inputModel' , function( newVal ) {
    if ( newVal ) {
        $scope.inputLabel.labelFilter = ''; // *** INSERT THIS LINE HERE ***
        $scope.refreshOutputModel();
        $scope.refreshButton();
    }
}, true );

// watch2 for changes in input model as a whole
// this on updates the multi-select when a user load a whole new input-model. We also update the $scope.backUp variable

$scope.$watch( 'inputModel' , function( newVal ) {
    if ( newVal ) {
        $scope.inputLabel.labelFilter = ''; // *** INSERT THIS LINE HERE ***
        $scope.backUp = angular.copy( $scope.inputModel );
        $scope.updateFilter();
        $scope.prepareGrouping();
        $scope.prepareIndex();
        $scope.refreshOutputModel();
        $scope.refreshButton();
   }
});

[JihadMotii-REISys]

@isteven I'm sorry, I hope everything works out for you.

I'll look into it and see what I can do about it.

Thanks again !

[codenewa]

I worked around this one by storing the $scope.inputLabel.labelFilter value and comparing it with the new labelFilterbefore the $scope.onSearchChange(...) call in the $timeout inside the $scope.updateFilter() method.

1. Setting up a storage variable for the search string.
   $scope.prevSearch = '';
2. Change to the $scope.updateFilter()method

if($scope.prevSearch !== $scope.inputLabel.labelFilter){
           $scope.onSearchChange({ 
           data: 
                  {
                      keyword: $scope.inputLabel.labelFilter, 
                      result: filterObj 
                   } 
            });
           $scope.prevSearch = $scope.inputLabel.labelFilter;
}

Here's the working plnkr: http://run.plnkr.co/plunks/oZUF2BFdRRT7dFxsJ3aU/

Let me know if this is the right way to do it.

Hope it helps.

[OSergienko]

@codenewa, Thank you! This method has helped me.
There is another problem in this task.
onChangeSearch function does not start when you delete the last character of the inputFilter.
There is a solution to the problem. Change to the updateFilter method:

 $timeout( function() {                   

                    $scope.getFormElements();               

                    // Callback: on filter change                      
                    if ( $scope.inputLabel.labelFilter.length > vMinSearchLength 
                         || ( $scope.inputLabel.labelFilter.length == vMinSearchLength 
                         && $scope.prevSearch > vMinSearchLength )) {
.....

Hope it helps too.