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

Hi @Benjith Sam I tryed your solution to my popover but running it today it isn't working. When I try to select the popup closes.

Do you have any idea how can I fix it? I need to search and select an user trough popup menu.

(tryed accessing your enviorment also: https://personal-zm7txfa3.outsystemscloud.com/RWA_Ben_Lab/PopoverJS)

Thanks for help.

Hi @Elaine Guimaraes,

The old approach didn't worked due to the dom structure change in latest Popover Menu widget. To make it work as required, use the below mentioned JS:

JS Snippet:

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

Demo Screen: PopoverJS

I hope this helps you!

Kind regards,

Benjith Sam

Thank you so much!!!

Sorry Benjith, could you help  me?

I tryed to implement this script, but I couldn't make this works. Has an error on 

"$actions.CheckboxOnChange();" the on change is unknow. I tryed to change for dropbos but not worked to. Could you help me, please?

"

Sorry Benjith, could you help  me?

I tryed to implement this script, but I couldn't make this works. Has an error on 

"$actions.CheckboxOnChange();" the on change is unknow. I tryed to change for dropbos but not worked to. Could you help me, please?

Sorry Benjith, could you help  me?

I tryed to implement this script, but I couldn't make this works. Has an error on 

"$actions.CheckboxOnChange();" the on change is unknow. I tryed to change for dropbos but not worked to. Could you help me, please?

Hi @Elaine Guimaraes ,

The cause of the error in JS element is due the unavailability of referenced client action called CheckboxOnChange in the screen/global scope.

The below mentioned JS statement invokes a screen action called CheckboxOnChange .

$actions.CheckboxOnChange(); // invoking a screen action

Solution: Define a client action called CheckboxOnChange in the Screen scope as shown below.

Refer to the attached oml.

Kind regards,

Benjith Sam

Thank you so much!!! 

Benjith, If it's not too much trouble, could you please assist me in figuring out where I'm going wrong? I've been trying to implement it in my scenario where I use an input and a block with a list to create an autocomplete window. However, I'm encountering a 'null' property error. I'm not sure if the error lies in the CSS modification I made, the reference to the input, or even if what I'm attempting to do by instantiating an autocomplete within a block inside a popover is not achievable in OutSystems. Being a beginner, it's challenging for me to diagnose the issue on my own. 

The click is not working here yet.

https://personal-h6lmzlzo.outsystemscloud.com/Zlate/TaskBoard?ProjectId=3

Hi Elaine,

The encountered exception is related to the custom defined JS code - its not due to the defined CSS rules for sure. 

Such type of error occurs when the referenced element is not loaded/available in the DOM while registering the click event. Either one of the below executed statement is failing.

document.querySelector('.cust-popover').addEventListener('click', function (e) {...})

popoverBottom.addEventListener('click', function () {...})

You can put some console log statements to debug and track the cause of the issue..

console.log('CustPopover: ', document.querySelector('.cust-popover'));
console.log('PopoverBottom: ', popoverBottom);

If any of the console.log() returns null then that's were it's failing i.e., Element is not yet loaded and the addEventListener method is failing. As a solution you can call the addEventListnener definition within a setTimeout method to have a delayed addEventListnener method execution.

I hope this helps you!

Kind regards,

Benjith Sam

THanks Benjith, I will try on this way.

Regards 🤩