2

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:

enter image description here

This field is editable through another popup.

enter image description here

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,

Fabien
  • 389
  • 2
  • 5
  • 15
  • 1
    To make sure you always click on the element and not on the outer element's padding, I suggest you remove the padding from it using CSS. You probably still want the padding, so just add it to the inner element and you should be fine. You can use the `popoverClass` attribute to add a specific class to the popover. – Shahar Mar 14 '21 at 09:57

0 Answers0