Keep Popover open
Application Type
Reactive

I am working on a filter using a popover. The filter is working perfectly when applied to the list. 

I used the code snippet below to stop the popover from closing when the dropdown has been clicked. 

The issue I'm having is that when the popover has been opened, if any empty space is clicked the popover closes. However, if the dropdown is clicked first, the popover stays open- even if the empty space is clicked. 


Does anyone know a better way to do this, or if there is a fix for the issue?

Thank you


mvp_badge
MVP
Solution

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

RWA_Lab_PopoverTask.oml

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

mvp_badge
MVP
Solution

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

RWA_Lab_PopoverTask.oml

Thank you Benjith, this works really well

mvp_badge
MVP

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. 

mvp_badge
MVP

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

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.