Set focus to input when menu is open using LayoutSideMenu
Application Type
Reactive
Service Studio Version
11.10.21 (Build 41765)

SETUP

Reactive web page using the Layouts | Layoutsidemenu

There is an Input box placed in the Common | Menu

When the hamburger button is clicked, the menu opens from the left, displaying the menu with the Input box.

see attached


ISSUE

need the Input in the pop out menu to immediately have focus when the menu pops open.  

I've tried setting Client Action SetFocus in menu, but no luck.

Suggestions or actual answers all appreciated

JSVars.oml

Solution

Just add one JS in your Project 

function getFocus() {
  document.getElementById("b2-Input_TextVar").focus();
}
"b2-Input_TextVar" = Is the ID of Input Box.


Then Call function getFocus() on MenuIcon --> OnClick Action 


That's it.

Hey!

You need to create a javascript function that you will use every time you click on the menu icon!

This function will be like this. You have your client action OnClick and inside, you have the javascript block, inside the javascript block you will get the input by the id and then use the focus method as below.

// first get a reference to the input tag const input = document.querySelector("#myInput"); // use the focus method input.focus(); 


and then

// use the focus method input.focus();

I will try, but that's the theory.

Regards,

Márcio C.

Thank you for your input. The OnClick would be the logical place to put javascript, if the Input were also in the MenuIcon block

The blocks in question are:

Layouts | LayoutSideMenu

Common | Menu

Common | MenuIcon

The main page Source Block is LayoutSideMenu.

The Input which needs autofocus is in the Menu block (btw, autofocus =auto, does not work either)

The Client Action OnClick is in the MenuIcon block, placing a js here means it will not be able to see the Input element that is located over in the Menu block.


ps I believe that this js should do it;

document.getElementById($parameters.InputId).focus();

but it needs to "see" the input before or as the menu pops open


Yes I know, that's the base of blocks from OutSystems, either you can do that on the LayoutSideMenu, or in the block menu icon, because the javascript will work, because it will get the input you want to set as focus and then put the focus on the menu!

Thanks

I will try now :)

Regards,

Márcio C.

So, i have found that there a client action SetFocus, where you can put the id of the wigjet where want to set focus after a certain action, in this case, when the side menu is active.

Also,you can check that here.
https://www.outsystems.com/forums/discussion/34778/setfocus/#Post262544


Yes I have tried that in multiple places (OnReady, OnRender, OnParametersChange, etc etc) and it does not achieve desired results.


Thank you for help

Yes I tried too, and I don't know why the widget is not getting thew focus :/ i will try

ISSUE: 

Using the OS Layout  | LayoutSideMenu

If you place a text box within the Menu and you want it to have focus as soon as the menu pops out, it can be done


SOLUTION:

Set up a chain of events between between your pages and the Common and Layout blocks that are used with LayoutSideMenu

In the Menu block, add a new input (In1) make it optional.

Set an Event in MenuIcon that is raised OnClick

LayoutSideMenu handles that MenuIcon event with its handler, then raises its own event to your main page.  In your main page, set the Menu input to a local var and then, your main page handles LayoutSideMenus event with a Handler (HandleChildEvent()) which in turn must change the local value.

Menu sees the input value change and raises OnParametersChanged, which executes the javascript that sets focus to the text input box in the Menu block.  I will post some clean easy to follow code soon to share with all


If anyone out there has a suggestion for a better way that works consistently with few moving pieces, please share.


Thank you!


ps. I will keep this question open for a few more days in case someone has a better, easier, simpler solution; but if none are offered, I will then close.

Dear Chris 

What I have understood from your post is - You want the Input Box active is someone opens the Menu with Navigation. 

If I am correct, we don't need to go in such complicated code. It will need Just a piece of code. 


Please verify if this demo is solution for you question - https://personal-9qwkrkgl.outsystemscloud.com/JSVars/main?_ts=637558634225455718


If yes, I will share the solution with you. 


Many thanks 

Looks good, would like to compare

Solution

Just add one JS in your Project 

function getFocus() {
  document.getElementById("b2-Input_TextVar").focus();
}
"b2-Input_TextVar" = Is the ID of Input Box.


Then Call function getFocus() on MenuIcon --> OnClick Action 


That's it.


I tried that earlier and it did not give the desired result, so I started looking into alternatives (rabbithole)

I think I see what happened better now, thank you for instruction & for sharing


quick question: could the script receive the input id as parameter as well?

Hi Chris 

Sorry, I saw the Quick Question very late. It was missed in the Email Chain. The script might receive the Input Parameter  and for that you will need to get Input Text in one Variable and same variable will need to be call there. The whole function will run on the Client Side. 


Can you tell me what is the purpose to get Input Box Dynamic? In your application the ID will remain same as long you are using it from Web Block. 

Also, if you initial requirement of getting textbox active is solved... Kindly mark the solution as solved. So, the other community members can follow the same if they have same requirement. 


How an input box ID could be passed in JS as variable parameter could be new thread in forum where other JS expert may also involve to help you.

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