Thanks @Laura Fidalgo, I tried to use this method but the "Apply" button action didn't run. I think because the stopPropagation event was on the entire popover but I'm not too sure

Hi Emmanuel,

You can follow the below mentioned approach for your requirment.

Implementation Steps:

1) Define custom style class to the popover widget, e.g. cust-popover

2) Define custom style class to the Apply Filter button, e.g. filter_btn

3) Define screen onReady handler and execute the below JS 

document.querySelector('.cust-popover').addEventListener('click', function (e) {    
   if(!e.target.closest('.filter_btn') && e.target.closest('.popover-bottom')) { 
        e.stopPropagation();
    }
});

Note: The above approach will prevent the popover being closed while clicking inside the popover section other than the Apply filter button. 

See this demo screen: PopoverJS

Refer to the attached oml file.

I hope this helps you!

Kind regards,

Benjith Sam

Thank you Benjith, this works really well

You're welcome, Emmanuel.

Glad to help you :)

Kind regards,

Benjith Sam

Morning @Benjith Sam , 

Thanks for your help but I've just realised that the checkboxes do not work. They are selected, however the action attached is not running. Do you have any thoughts on this? 

Thanks so much for your help.

Emmanuel. 

Hi Emmanuel,

Good Morning :)

Unfortunately, I think the solution suggested by Dorien in your other post is probably the only option I see to handle this case.

Other version:

document.querySelector('.cust-popover').addEventListener('click', function (e) {
    
   if(!e.target.closest('.filter_btn') && e.target.closest('.popover-bottom')) {
      if (e.target.classList.contains('checkbox')) {
          $actions.CheckboxOnChange();
      }
       e.stopPropagation();
    }
});

See this demo screen: PopoverJS

Kind regards,

Benjith Sam

Thanks Benjith, 

I've got everything working now :)  I appreciate the help. 

Emmanuel