Datepicker in dropdown closes both on date selection

[HannaKukharava]

When using the datepicker inside a dropdown, selecting a date closes not only the datepicker but also the dropdown.
This issue started occurring since ngx-bootstrap v18.0.2 after the changes introduced in this fix, specifically after adding the following line of code:

ngx-bootstrap/src/component-loader/component-loader.class.ts

Line 229 in 7d87cb4

this._componentRef?.destroy();

For some reason, this change emits a click event, which triggers the toggle click with false as its value. As a result, the hide() method in BsDropdownDirective is called, causing the dropdown to close unexpectedly.
Relevant call stack and behavior:

ngx-bootstrap/src/dropdown/bs-dropdown-toggle.directive.ts

Line 50 in 7d87cb4

this._state.toggleClick.emit(false);

ngx-bootstrap/src/dropdown/bs-dropdown.directive.ts

Line 277 in 7d87cb4

hide(): void {

Reproduction
You can reproduce the issue in the following StackBlitz Example

Versions of ngx-bootstrap, Angular, and Bootstrap:

• ngx-bootstrap: v18.0.2+ (bug introduced in v18.0.2. StackBlitz Example is v19.0.2)
• Angular: v19.0.6
• Bootstrap: v5.3.3

Expected Behavior
Selecting a date in the datepicker should only close the datepicker while keeping the dropdown open.

Actual behaviour:
Selecting a date in the datepicker closes datepicker and dropdown.

Additional Context
This behavior was not present in versions prior to v18.0.2 and appears to be a regression due to the linked PR.
Would appreciate any insights or potential workarounds in the meantime. Thanks!

[jdre-c8y]

Any updates? It blocks updating project to Angular 19 as peerDependencies of ngx-bootstrap in 19.0.2 has deps on Angular 19...

[dkhavilo]

The same is true when datepicker is inside popover with [outsideClick]=true. Basically datepiker container is attached to the body, so clicking date to select triggers outsideClick for popover (dropdown in OP case).

I see following workarounds:

1. set [outsideClick]=true. This is not ideal form UX standpoint.
2. somehow set (click)="$event.stopPropogation()" for datepicker container. This is bad from maintenance standpoint since relies on a specific implementation with can change without your control.

2 Devs: make/return option to have custom container for datepicker dropdown or an option to suppress clicks for datepicker container on a per use basis.

[dkhavilo]

I used following workaround for my popover solution:
For the bsDatepicker I added a onShown event listener
(onShown)="datepickerShown($event)"

and the handler itself

    // A workaround to prevent popover from closing when clicking on the datepicker
    datepickerShown = ({ _element }: { _element: ElementRef }) => {
        const datepickerContainerElement = _element.nativeElement;
        datepickerContainerElement.addEventListener(
            'click',
            (e: MouseEvent) => {
                e.stopPropagation();
            },
        );
    };

Works for me, I can interact with datepicker and the hit save in a popover

[HannaKukharava]

@dkhavilo as a workaround works for me as well, thanks