I am working on an Angular project. I am building a form, editable through a popover. I am using Ng-Boostrap popovers.
My form got a Date element:
This field is editable through another popup.
Both of them are set autoclose to 'outside'.
Problem: When I click into the second one (when I select a date, buttons, or in a blank space), the first popup get closed and close the second one as well.
My thought: I set the first one autoclose attribute to false. Moreover, I added a div around the second popover title template and content template, with a click event to stop the propagation. Like this following, (showing popTitle template but it is the same for the popover content template) :
<ng-template #popTitle>
<div (click)="$event.stopPropagation()">
// Title code
</div>
</ng-template>
My solution is kind of working, I can select and save the date. However, the div does not contain padding of both element : when I click into the element padding, I still got the issue.
Is there a way to encompass the whole popover to prevent closing popover? I am missing something with the ngbpopover configuration? Or is there another best way to do it?
Thank you for your answers,