I recently started working with Kendo UI grid with Angular.
After some testing I discovered the lack of timepicker filter menu component and decided to make my own.
The problem is when I use the Kendo UI timepicker in the template and choose a time, the filter menu automatically closes.
Here is a stackblitz to reproduce the issue:
A small note: The reason I extended the DateFilterMenuComponent in my custom TimeComponent is that I have the same operators as date related values which is okay and to gain easy access to other common filter properties (example logic operators).
Can someone help me out with the menu not closing when a time is selected?
So far I tried the following:
On the timepicker I tried
(click)="$event.preventDefault(); $event.stopPropagation()"
That results into the timepicker not closing but the filter menu still closes.
I found the answer after contacting Telrik support, they pointed me to
The problem is that the timepicker is being rendered in the body/root component and the filter menu is (by default) configured to close when a user clicks outside the filter menu content.
Here is the documentation mixed with my problem fixed in stackblitz: