Material: chips(readonly): should not trigger excessive watchers and digests

[marvelsrp]

Test on AngularJS Material 1.1.18

Detailed Reproduction Steps:

1. Create list with 100 items and 10 chips

this.items = Array.from(Array(100), (item, index) => ({
      name: `Item ${index}`,
      chips: Array.from(Array(10), (item, index) => `Chip ${index}`);
     })
 );

1. Render them items

div(ng-repeat="item in controller.items")
    b {{item.name}}
    md-chips(ng-model="item.chips" readonly="true")

1. What is the expected behavior?

Render immediate

What is the current behavior?

Was added ~12000 watchers and make ~1000 digests (once per added chip). Page will be lags 3-6 sec.

Digests were called from here: https://github.com/angular/material/blob/97455f529fd4bbf162d03f74e887dc6aa3f04a00/src/components/chips/js/chipDirective.js#L60

I think in readonly mode $timeout with call focusLastChipThenInput can not be run.

Codepen:

https://codepen.io/marvelsrp/pen/RzZXgW

[Splaktar]

Yeah, that seems like a performance problem. Can you please provide a CodePen demo?

[marvelsrp]

Yeah, that seems like a performance problem. Can you please provide a CodePen demo?

https://codepen.io/marvelsrp/pen/RzZXgW

[Eduardo-Julio]

Currently experiencing the same issue with AngularJS 1.5.10.

In my case I noticed because every time the readonly is enabled or disabled, it creates watchers and they start increasing indefinitely with each change of that attribute.