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.
The DtQuickFilter component should react appropriately to filters passed into the [filters] input. Then the (filterChanges) event should be fired.
The DtQuickFilter component accepts the filters passed into [filters], but does not fire the event handler, and also the console shows a ExpressionChangedAfterItHasBeenCheckedError.
Thank you!
Arnaud
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.
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)?
@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!
@tomheller I just enabled Ivy in my app but I am still seeing the ExpressionChangedAfterChecked error. Maybe there is something else going on?
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!
@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
For the record, there is also a call-sync scheduled to investigate this issue further. Thanks @areknow for setting this up.
@areknow can you try building the app locally with AOT? (Ahead of time compilation). You can enable this by setting the
aot
property in theangular.json
to true or by passing--aot
to theng 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 😅
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.
@tomheller sounds good!
@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 👍
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.