ag-grid custom date component with ngx-boostrap

I want to create my custom date filter with a nice datepicker. I added a custom date component as described here: https://www.ag-grid.com/javascript-grid-date-component

In this component I use ngx-bootstrap's BsDatepickerModule. The datepicker is showing and working.

The problem is, after selecting a date not just the datepicker is closed, the whole filter menu is closing. I want the user to press the apply filter first. This is especially troublesome for date ranges where the user has to enter two dates.

See the following plunker for demo: https://plnkr.co/edit/hM7uAZaadbjoGcXPRaDP

How can the filter menu be prevented from closing after selecting a date via BsDatepickerModule datepicker?

customDate.component.html

<div class="filter">
    <input type="text"
    #dp="bsDatepicker"
    bsDatepicker
    [bsValue]="date"
    [bsConfig]="{ dateInputFormat: 'DD.MM.YYYY' }">
</div>

customDate.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-customdatecomponent",
  templateUrl: "./customDate.component.html",
})
export class CustomDateComponent  {
  private date: Date;
  private params: any;

  agInit(params: any): void {
    this.params = params;
  }
  onResetDate() {
    this.setDate(null);
    this.params.onDateChanged();
  }
  onDateChanged(event) {
    this.params.onDateChanged();
  }
  getDate(): Date {
    return this.date;
  }
  setDate(date: Date): void {
    this.date = date;
  }
}

Edit 04/26/2023: On later version of ag-grid (I am on ag-grid v25), this process has been simplified significantly. Per the documentation here,

• Add the ag-custom-component-popup CSS class to your floating element.

For the given example of bsDatepicker, we can just do the following...

<div class="filter">
   <input type="text"
       #dp="bsDatepicker"
       bsDatepicker
       [bsValue]="date"
       [bsConfig]="{dateInputFormat: 'DD.MM.YYYY', containerClass: 'ag-custom-component-popup'}">
</div>

(Original response below)

Since I wasn't able to find any other solutions to this problem on SO, I want to provide my solution to this problem.

What's happening is that when you click the datepicker popup, its creating the element outside of the context of ag-grid's pop-up service. Since the datepicker element is not within the pop-up service's current context, clicking the datepicker means ag-grid thinks you clicked outside of the filter and that you want to close the filter pop-up.

To solve the problem, you want to add an event handler for onShown to the datepicker to add the component to ag-grid's pop-up service.

customDate.component.html

<div class="filter">
    <input type="text"
           #dp="bsDatepicker"
           bsDatepicker
           [bsValue]="date"
           (onShown)="addDatepickerToAgGridContext($event)"
           [bsConfig]="{ dateInputFormat: 'DD.MM.YYYY' }">
</div>

Then, in the event handler, you simply navigate to the popupService in the API that is available to you in your params and add the datepicker to the list of active elements. In our case, the datepicker is instantiated in a tag bs-datepicker-container, so you want to use JS to select that element, then add it to the array.

addDatepickerToAgGridContext(e){
    this.params.api.gridCore.popupService.activePopupElements.push(document.getElementsByTagName("bs-datepicker-container")[0]);
}

Note on later versions of ag-grid (I'm now on "ag-grid-community": "22.0.0"), the path to the list of active popup elements has changed. The active popup elements is now stored in the array at api.gridCore.popupService.popupList.

addDatepickerToAgGridContext(e){
    this.params.api.gridCore.popupService.popupList.push(
       {element: document.getElementsByTagName("bs-datepicker-container")[0]}
    );
}