Change focus widget on click - mobile app

Change focus widget on click - mobile app


Currently I have an app that has a input text box inside an expandable section.  The default behavior of clicking on an input text box is to open the keyboard and place the cursor inside the text box.

Is there a way for us to click the expandable section heading and when it opens the section, to follow this behavior on the relevant text box?


Dan Asserati

Hi Daniel,

It's possible using jQuery (don't forget to import jQuery into your app, if it's not already there). Create a client action to handle the SectionExpandable's "ExpandedOrCollapsed" event that looks like this:

Your JavaScript node must have a text input parameter that will receive the ID of the input you want to focus. The JavaScript code looks like this:

$( document ).ready(function() {
  $('#' + $parameters.InputId).focus();

Hi Aurelio, thanks for your help and advice.  I have created the ExpandOrCollapsed event as suggested and have checked the Javescript node branch with a feedback message which is being picked up correctly.  However, the focus isn't occuring as expected.  I have named the input widget "TextArea", have i configured this correctly?

Hi Daniel,

The value of the JavaScript node's "InputId" parameter must be the widget's "Id" runtime property (something like TextArea.Id), and not a literal value.

Hi Santos,

I just used that script to define the focus to my textbox, I passed my textbox id correctly, but I'm facing an error "$ is not defined".

Did i made any mistake here?

Hi Keerthi,

That's probably because you forgot to add jQuery as a required script to your screen. Either do that through the screen's "Required Scripts" property or change the script to use vanilla JavaScript. Something like: