Widget Popup Focus

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.

mvp_badge
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

  1. Define an OnChange handler to the respective TextArea widget
  2. Introduce a JS node (with an input parameter i.e. TextAreaWidgetId) in the handler client action flow
  3. 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

Hello, Benjith.


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


Regards,

Vivian

mvp_badge
MVP

You're welcome Vivian.

I'm glad that it helped you :)


Kind regards,

Benjith Sam

Hello Vivian Fiana, 

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

Regards,

Akshay Deshpande



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

Champion

Hi Vivian,

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

Kind ready,



mvp_badge
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

  1. Define an OnChange handler to the respective TextArea widget
  2. Introduce a JS node (with an input parameter i.e. TextAreaWidgetId) in the handler client action flow
  3. 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

Hello, Benjith.


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


Regards,

Vivian

mvp_badge
MVP

You're welcome Vivian.

I'm glad that it helped you :)


Kind regards,

Benjith Sam

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?

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