Input field inside popover disappears when clicked
Question
Application Type
Reactive

Greetings,

I´m facing the following problem with OutSystems. I first defined a table that has a icon (that´s actually a Popover menu) in each of its header cell. When the icon (Top content) is clicked, the bottom part is displayed with an input field and two buttons.

The problem is when I click the text input, the popup dissapears. I can´t keep it open to type anything. If I right click it, the cursor appear inside the text input and then I can input any text.


Thanks in advance.



Solution

Hi Rafael,

One of the solutions for your use case is to stop the click event propagation on input click inside the popover widget using JS.

1) Add a custom style class to the input

2) In the screen OnReady event action flow, register an event to the popover widget using the below-mentioned Javascript.

JS Snippet:

var popoverEle = document.getElementById($parameters.CommentPopoverId);

if(popoverEle) {
    popoverEle.addEventListener('click', function (e) {
        if(e.target.classList.contains('popover-input')) {
            e.stopPropagation();
        }
    });
}

Demo screen: CodeInputPopoverTask

Refer to the attached oml.

I hope this helps you!


Kind regards,

Benjith Sam

RWA_Lab_CodeInptPopoverTask.oml

Amazing @Benjith Sam ! Thanks!!

You're welcome, Rafael,

Glad to help you :)

If the proposed solution helped you, can you mark it as the solution?


Kind regards,

Benjith Sam

Have you tried to debug it? Can't know without the OML, but probably (somehow) your input is calling the same action of the popup / changing the value of your boolean variable.

Hello @Rafael Belem 

can you share your oml?


Hi Rafael Belem,

If possible then please share oml 

thanks


Sorry, I´m a noobie with Outsystems.

I did an oversimplification of what I need: click an perform a text input inside a popover menu.

u42r_poc.oml

And here is a gif with the described behaviour.

ezgif-2-615cf2a390.gif

@Rafael Belem
 
I am attaching your updated OML.
I hope it will helpful to you


Thanks
Shriyash

u42r_poc.oml
Solution

Hi Rafael,

One of the solutions for your use case is to stop the click event propagation on input click inside the popover widget using JS.

1) Add a custom style class to the input

2) In the screen OnReady event action flow, register an event to the popover widget using the below-mentioned Javascript.

JS Snippet:

var popoverEle = document.getElementById($parameters.CommentPopoverId);

if(popoverEle) {
    popoverEle.addEventListener('click', function (e) {
        if(e.target.classList.contains('popover-input')) {
            e.stopPropagation();
        }
    });
}

Demo screen: CodeInputPopoverTask

Refer to the attached oml.

I hope this helps you!


Kind regards,

Benjith Sam

RWA_Lab_CodeInptPopoverTask.oml

Amazing @Benjith Sam ! Thanks!!

You're welcome, Rafael,

Glad to help you :)

If the proposed solution helped you, can you mark it as the solution?


Kind regards,

Benjith Sam

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