NgbDatepicker popup in shadow dom closes itself when clicking on it

[lucbu01]

Hey, I'm using your datepicker component in a shadow dom and when I open the popup and click inside of it, for example to change the year, the popup closes itself. I don't really know how you detect if the click was made inside the popup, but I made a breakpoint and saw that when you use something like document.elementsFromPoint(event.clientX, event.clientY), it will return only elements before the shadow-root, where the component is inside:

[maxokorokov]

We'll need a minimal reproduction scenario: StackBlitz or maybe a GitHub project in this case might be simpler. Otherwise not much we can do.

Autoclose implementaion we have is here → https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/util/autoclose.ts

---

Please take a look at the Getting Help section in documentation and use the appropriate support channel.

If you believe you've found a bug in this library then please:

• fill in the issue template correctly
• provide a minimal reproduction scenario in a StackBlitz

[lucbu01]

Thanks for answering. I forked your example on Stackblitz:

Your Example: https://stackblitz.com/run?file=app/datepicker-popup.ts My Fork: https://stackblitz.com/edit/angular-ddxygf?file=src/app/datepicker-popup.ts

Changed line:

[ashar340]

Would like this to be fixed soon, facing the same issue.

[vickieallen-certua]

We are also not able to use the Datepicker due to this issue.

[ghost]

Do you have some updates to this issue? We plan using this component for long time inside of web-components.

[SkCodeRains]

i am also facing same issue when i enable shadowdom it just get closed on every click no matter where you click , without shadowdom it is working fine but not with shadowdom

[Thilo84]

The Problem is, that ng-bootstrap has an ngbAutoClose-Listener. Within this listener the event.target is used: https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/util/autoclose.ts#L37

In ShadowDOM this event.target works different and return the shadowRoot element and not the clicked element. The problem is described here: https://tinytip.co/tips/js-event-composed-path/

Workaround Set autoClose to false and write your own Close-Handler.

[marcinmajkowski]

I was able to overcome the issue by changing event.target in https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/util/autoclose.ts#L37 to event.composedPath()[0] using patch-package. Not sure whether it is acceptable solution for the library though.

[vgoreiko]

Any updates on this? I also have such issue related to the encapsulation: ViewEncapsulation.ShadowDom