Material: mdAutocomplete Cannot read property 'indexOf' of undefined

[ilanbiala]

When I try to add a chip with Material 0.10.1-rc1, I get this error:

TypeError: Cannot read property 'indexOf' of undefined
at MdChipsCtrl.appendChip (angular-material.js:14790)
    at MdChipsCtrl.<anonymous> (angular-material.js:14955)
    at Array.c (angular.js:1157)
    at Object.handleSelectedItemChange [as fn] (angular-material.js:13731)
    at m.$get.m.$digest (angular.js:15667)
    at m.$get.m.$apply (angular.js:15935)
    at angular.js:17691
    at e (angular.js:5387)
    at angular.js:5659(anonymous function) @ angular.js:12314$get @ angular.js:9101$get.m.$digest @ angular.js:15685$get.m.$apply @ angular.js:15935(anonymous function) @ angular.js:17691e @ angular.js:5387(anonymous function) @ angular.js:5659

When I inspect this.items on that line, I get undefined. When I do this.$element, I see it's referring to the md-chips. I'm using this HTML:

<md-chips ng-model="projectDetails.countries" md-autocomplete-snap md-require-match>
  <md-autocomplete md-selected-item="selectedItem"
                                 md-search-text="searchText"
                                 md-items="country in countries | filter: searchText"
                                 md-item-text="country"
                                 placeholder="United States of America">
    <span md-highlight-text="searchText">{{country}}</span>
  </md-autocomplete>
</md-chips>

[ilanbiala]

With 0.10.0, I get this error:

TypeError: $scope.textChange is not a function
    at Object.handleSearchText [as fn] (angular-material.js:12736)
    at m.$get.m.$digest (angular.js:15667)
    at m.$get.m.$apply (angular.js:15935)
    at HTMLInputElement.<anonymous> (angular.js:23244)
    at HTMLInputElement.c (angular.js:3264)
    at focusElement (angular-material.js:12573)
    at angular-material.js:12510
    at angular.js:17682
    at e (angular.js:5387)
    at angular.js:5659(anonymous function) @ angular.js:12314$get @ angular.js:9101$get.m.$digest @ angular.js:15685$get.m.$apply @ angular.js:15935(anonymous function) @ angular.js:23244c @ angular.js:3264focusElement @ angular-material.js:12573(anonymous function) @ angular-material.js:12510(anonymous function) @ angular.js:17682e @ angular.js:5387(anonymous function) @ angular.js:5659

Any ideas?

[jessenieminen]

I get something similar with 1.4.3:

angular.js:12330 TypeError: Cannot read property 'indexOf' of undefined
at MdChipsCtrl.appendChip (angular-material.js:13729)
at MdChipsCtrl.inputKeydown (angular-material.js:13634)
at MdChipsCtrl.<anonymous> (angular-material.js:13885)
at val (angular.js:1166)
at Scope.$get.Scope.$eval (angular.js:15846)
at Scope.$get.Scope.$apply (angular.js:15945)
at HTMLInputElement.<anonymous> (angular-material.js:13885)
at HTMLInputElement.eventHandler (angular.js:3271)

[rgolea]

your ngModel has to be an array by default: ng-model="projectDetails.countries"
and in your controller:

$scope.projectDetails.countries = $scope.projectDetails.countries || [];

Make sure $scope.projectDetails is defined.

[ilanbiala]

It is defined.

[kamarouski]

There is a bug currently with autocomplete and angular 1.4

in autocomplete declaration set md-search-text-change=null and md-selected-item-change=null

[jessenieminen]

I downgraded to 1.3.15 and even tried using md-search-text-change=null and md-selected-item-change=null but neither helped. I still get the same error.

TypeError: Cannot read property 'indexOf' of undefined
at MdChipsCtrl.appendChip (angular-material.js:13729)
at MdChipsCtrl.<anonymous> (angular-material.js:13894)
at Array.val (angular.js:1010)
at Object.handleSelectedItemChange [as fn] (angular-material.js:12697)
at Scope.$get.Scope.$digest (angular.js:14397)
at Scope.$get.Scope.$apply (angular.js:14660)
at HTMLLIElement.<anonymous> (angular-touch.js:480)
at HTMLLIElement.eventHandler (angular.js:3047)

Here are my dependencies:

"dependencies": {
"angular": "~1.3.15",
"angular-resource": "~1.3.15",
"angular-mocks": "~1.3.15",
"angular-cookies": "~1.3.15",
"angular-animate": "~1.3.15",
"angular-touch": "~1.3.15",
"angular-sanitize": "~1.3.15",
"angular-bootstrap": "~0.11.2",
"angular-ui-utils": "~0.1.1",
"angular-ui-router": "~0.2.11",
"angular-material": "~0.10.0"
  },
  "resolutions": {
   "angular": "1.3.15"
  }

[typotter]

Could you please provide a codepen/plunkr/etc demonstrating this error? On the surface, it looks like the ng-model is being set to something undefined.

[JoshVarga]

I just had the exact same problem. However I am using Material 0.11.0, with Angular 1.4.3

As typotter said, my resolution was to ensure that the ng-model on md-chips was initialized to an empty array.

As rgolea said try something similar to this while initializing:

$scope.projectDetails = $scope.projectDetails || {};
$scope.projectDetails.countries = $scope.projectDetails.countries || [];

[rgolea]

Try also not having nested scopes... You might think it's defined but in fact it might be inherited. Remember that in order to prevent that you have to use the controllerAs syntax...
http://toddmotto.com/digging-into-angulars-controller-as-syntax/

You might have it easier by injecting something default like details just so: this.projectDetails = details and you ensure that in the resolve method of the route you define weather you're using the controller for adding or for editing. It might be something like this:

//inside the config add details route
controller: 'demoCtrl',
resolve: {
   details: ['$q', function($q){
      var defer = $q.defer();
      var projectDetails = {};
      projectDetails.countries = [];
      defer.resolve(projectDetails);
      return defer.promise;
   }]
}

//inside the config of editing details route
controller: 'demoCtrl',
resolve: {
   details: ['$q', 'detailsService' function($q, detailsService){
      var defer = $q.defer();
      detailsService.get().then(function(data){
             data.countries = data.countries || [];
             defer.resolve(data);
      }).catch(function(err){
         defer.reject(err);
     });
      return defer.promise;
   }]
}

This is just out of the top of my head of what could possibly go wrong there. I haven't tested the code since it's just to reflect that you shouldn't have too many checks inside the the controller.

Anyways, @typotter, the real issue here is that the autocomplete should check for an ngModel undefined and set it to an array by default. I'm not sure if this issue has been fixed or not. (I've seen a recent PR)

[jualvarez]

Maybe this codepen helps clarifying this issue. When the chip's ng-model is undefined, the reported error is raised. On other angular directives (input for example) this doesn't happen.
I've tracked the issue down to the $render function, where if the $viewValue is undefined, the controller.items value is overriden with undefined instead of an empty array.
Hope this helps!

[faizmh]

TypeError: Cannot read property 'indexOf' of undefined
at e.appendChip (angular-material.min.js:12)
at e. (angular-material.min.js:12)
at Array. (angular.js:1007)
at Object.w as fn
at Scope.$digest (angular.js:14308)
at Scope.$apply (angular.js:14571)
at HTMLLIElement. (angular.js:21571)
at HTMLLIElement.x.event.dispatch (jquery.min.js:5)
at HTMLLIElement.y.handle (jquery.min.js:5)

I would get the error as above

As rgolea commented on Jul 29
your ngModel has to be an array by default: ng-model="projectDetails.countries"
and in your controller:
$scope.projectDetails.countries = $scope.projectDetails.countries || [];
Make sure $scope.projectDetails is defined.

Everything was defined.
However, I had and ajax which would assign $scope.projectDetails = data , i.e value returned from ajax and making ngModel uninitialized.
The fix was to return empty array from server side (or empty array initialization client site after ajax completes)

[ThomasBurleson]

This issue is closed as part of our deprecation effort.
For details, see our post Spring Cleaning 2016.