Widget Popup Focus | OutSystems

Vi A

Solved

Widget Popup Focus

Question

Hello,

I want to use text area in my popup as a description. But when I want to input the description in textarea, the focus will be gone after I type one character.

Is there any fix for this problem?

Thank you.

08 Mar 2021

Benjith Sam

MVP

Solution

Hi Vivian,

I was able to reproduce the mentioned case. After investigating the caused issue, I get to know that it is something to do with React rendering. Please refer the below links..

Link - 1

Link - 2

Solution which I could suggest is

Define an OnChange handler to the respective TextArea widget
Introduce a JS node (with an input parameter i.e. TextAreaWidgetId) in the handler client action flow
Define the below mentioned JavaScript in the JS node

JavaScript Snippet:

setTimeout(function() {
    
    var elementId = document.getElementById($parameters.TextAreaWidgetId);
    
    if(elementId) {
        elementId.focus();
    }      
    
}, 1);

See this Sample App

Hope this helps you!

Kind regards,

Benjith Sam

See solution in context

08 Mar 2021

2 replies

Last reply 08 Mar 2021

Show thread

Hide thread

Vi A

Hello, Benjith.

Thank you so much for the solution, it works! :)

Regards,

Vivian

08 Mar 2021

Benjith Sam

MVP

You're welcome Vivian.

I'm glad that it helped you :)

Kind regards,

Benjith Sam

08 Mar 2021

Akshay Deshpande

Hello Vivian Fiana,

can you send your OML so it will be easy to determine your problem.

Regards,

Akshay Deshpande

08 Mar 2021

Komal Kumbhar

Hi,

I have tried to create and enter the data in Text are in service studio , but not able to get your issue, is the same issue are you facing. Please find attached OML.

Regards,

Komal

PopupDemo.oml

08 Mar 2021

Tom Zhao

Hi Vivian,

Outsystems already have this feature. Input's Prompt property is suited for this issue.

Kind ready,

08 Mar 2021

Benjith Sam

MVP

Solution

Hi Vivian,

I was able to reproduce the mentioned case. After investigating the caused issue, I get to know that it is something to do with React rendering. Please refer the below links..

Link - 1

Link - 2

Solution which I could suggest is

Define an OnChange handler to the respective TextArea widget
Introduce a JS node (with an input parameter i.e. TextAreaWidgetId) in the handler client action flow
Define the below mentioned JavaScript in the JS node

JavaScript Snippet:

setTimeout(function() {
    
    var elementId = document.getElementById($parameters.TextAreaWidgetId);
    
    if(elementId) {
        elementId.focus();
    }      
    
}, 1);

See this Sample App

Hope this helps you!

Kind regards,

Benjith Sam

08 Mar 2021

2 replies

Last reply 08 Mar 2021

Show thread

Hide thread

Vi A

Hello, Benjith.

Thank you so much for the solution, it works! :)

Regards,

Vivian

08 Mar 2021

Benjith Sam

MVP

You're welcome Vivian.

I'm glad that it helped you :)

Kind regards,

Benjith Sam

08 Mar 2021

Alvaro Pinilla Pedroche

Hi,

The workaround is OK for Web application (in spite of the input blinking). But if you visit the app via mobile, the keyboard in closing and reopening with each letter and this behaviour is frustating to the user.

Do you know how OutSystems will deal with this problem?

27 Mar 2021