Kendo-angular: ExpressionChangedAfterItHasBeenCheckedError when using ComboBox

[dwally89]

I have a ComboBox, that when an item is selected, it gets added to an array "list2". I also have the ComboBox set to be disabled when "list2" is not empty. When an item in the ComboBox gets selected, an ExpressionChangedAfterItHasBeenCheckedError is thrown.

http://plnkr.co/edit/YoMbW0rCyQ0BEZx9MAhb?p=preview

[tapopov]

Hi @dwally89

I could not reproduce the issue using the example you shared. Would you please share the exact steps in order to get the error?

[simon11196]

@tapopov Looks like it's only happening in Chrome (used version 58.0.3029.110).
Tested it in IE11 and Firefox 48.0.2 without error.

[dwally89]

@tapopov

1. Open the Plunker using the link above
2. Click the blue button "Launch the preview in a separate window"
3. Press F12 to open the Developer Tools, and switch to the Console tab
4. Pick any item from the Kendo ComboBox
5. ExpressionChangedAfterItHasBeenCheckedError will be displayed in the console

I am using Chrome 58.0.3029.110 (64-bit)

[simon11196]

Found this in the angular repo
Disabling Fieldset on keyboard-submit causes ExpressionChangedAfterItHasBeenCheckedError

[dwally89]

@simon11196 , I don't think this is related as the problem does not occur with a standard HTML select tag. I have updated the Plunker to include a working example with an HTML select tag.

[dwally89]

@tapopov / @simon11196 any update on this?

[dtopalov]

The logic, performed on valueChange needs to be moved from the template to a handler, e.g.:
http://plnkr.co/edit/V4qk71gDAZkHnSwmk99j?p=preview

This way the Angular change detection mechanism will be stabilized, and the discussed error will not occur.

[dwally89]

@dtopalov , I'm not sure if you forgot to save the Plunker, but list 1 does not become disabled after an item is selected.

[dtopalov]

@dwally89 The ComboBox disabling logic was removed in an attempt to isolate the issue. However, you are correct that bringing it back causes the discussed error. It seems that the combination of an "ngModel" binding and an attempt to change the component state at the same time with changing its value, leads to the undesired behavior.

We will need to investigate the issue further and try to provide a solution. Thank you for the understanding.

[tapopov]

@dwally89
Here is a more detailed break down of what happens. Disabling the ComboBox triggers its input's blur event, where an internal property tracking the focus is also changed (after it has been checked for), hence the error. Manually detecting for any interim changes should solve this. Here is a workaround example while we find a way to fix this on a component level.

[tapopov]

Still in progress. Related to https://github.com/angular/angular/issues/17793

[dwally89]

Thanks for the update, glad to see it's being looked into

[tsvetomir]

Closing this as we're unable to provide a fix in our code. Please use the workaround until the Angular issue is fixed.