[Quick Filter] Programatically adding active [filters] causes ExpressionChangedAfterItHasBeenCheckedError and prevents handler from firing

[areknow]

Bug Report

When using the DtQuickFilter component and passing in an array of filters into the [filters] input, the component does not react as required like the DtFilterField does.

What should happen

The DtQuickFilter component should react appropriately to filters passed into the [filters] input. Then the (filterChanges) event should be fired.

What happens currently

The DtQuickFilter component accepts the filters passed into [filters], but does not fire the event handler, and also the console shows a ExpressionChangedAfterItHasBeenCheckedError.

Demo

https://stackblitz.com/edit/github-mpgcfd?file=src%2Fquick-filter%2Fquick-filter-default-example%2Fquick-filter-default-example.ts

1. Note the "fakeFilters" array that is being passed to the [filters] input
2. Note the console log in the "handle(event)" method that is attached to the (filterChanges) event
3. Check the browser console to see that the event was never fired although fake filters were in fact appended to the filter bar
4. Note the expression has changed error in the browser log

Thank you!
Arnaud

[ffriedl89]

Hey @areknow thanks for providing a reproduction example and opening up the issue.
I guess that the event is not fired is by design - since you already set the filters you know that they changed - therefore we don't fire events right after inputs are set. We only fire events when the user interacted with the component. But i might be wrong in this case @lukasholzer you know more for sure :)

Regarding the ExpressionChangedAfterChecked error - this is definitely something we need to check out.

[tomheller]

At this point we are assuming that this is a problem when running in viewEngine.
We have tried to reproduce it in our dev and demos applications, and were not successful. We were not able to reproduce the problem outside of stackblitz.

@areknow can you confirm that the app you have noticed this problem in, is running in viewEngine (we know that stackblitz is running viewEngine)?

[areknow]

@ffriedl89 Sure that makes sense, thank you for the explanation about the event handler!

@gselltho I can confirm that my application is using viewEngine.

Thanks guys!

[areknow]

@tomheller I just enabled Ivy in my app but I am still seeing the ExpressionChangedAfterChecked error. Maybe there is something else going on?

[areknow]

Another interesting update: The error is only happening to me locally. After building it in dev through our pipeline (jenkins), the error is not visible in the dev env.

Locally I did a full npm ci but I'm still seeing the error. Is there another cache that should be cleared?

Thanks!

[lukasholzer]

@areknow can you try building the app locally with AOT? (Ahead of time compilation). You can enable this by setting the aot property in the angular.json to true or by passing --aot to the ng serve ... command.

I think this is an JIT (just in time) compilation problem – that should be the reason why you don't see it in your dev environment.

In general since version 9 you should use AOT for compilation:
https://angular.io/guide/aot-compiler#choosing-a-compiler

[tomheller]

For the record, there is also a call-sync scheduled to investigate this issue further. Thanks @areknow for setting this up.

[areknow]

@areknow can you try building the app locally with AOT? (Ahead of time compilation). You can enable this by setting the aot property in the angular.json to true or by passing --aot to the ng serve ... command.

I think this is an JIT (just in time) compilation problem – that should be the reason why you don't see it in your dev environment.

In general since version 9 you should use AOT for compilation:
https://angular.io/guide/aot-compiler#choosing-a-compiler

@lukasholzer thanks for the reply!
I tried adding aot: true to the serve build config in angular.json and I also tried adding the --aot flag to the serve command. I still see the error locally 😅

[tomheller]

This is getting really weird. We have also tried this in our development application with every possible permutation of ivy: on|off and viewEngine: on|off, and we still were not able to reproduce the error. But we can see this in stackblitz and are quite baffled on why this is happening. I'm looking forward to our call @areknow. Maybe if we put our heads together, we can figure out what is going on here.

[areknow]

@tomheller sounds good!

[areknow]

@tomheller I was able to reproduce the issue in a fresh project: https://github.com/areknow/barista-quick-filter-bug

Still happy to meet at our planned time 👍

[tomheller]

Thanks to @areknow we were able to track down the source of the problem in the setup he provided. Unfortunately we are still not able to reproduce it in any of our applications within the repository, which is somewhat worry-some.