[BUDI-6580] Autofocus Input - Add setting to form block/form to autofocus on page open

[melohagan]

Discussed in #9652

^{Originally posted by Hystarea February 10, 2023}
I am looking for a way to autofocus a text field input when a page is loaded. The purpose of this is to make searching an internal Budibase db quicker.

_BUDI-6580

[SaunakNandi]

@shogunpurple @melohagan Guys i am a newbie, so can u tell me how to set up this project after performing a git clone?

[EmCmEdT]

I too would like to do this. Helps the flow if you have to input the form multiple times in a day like logging time tickets, units shipped, problems/issues, etc.

[melohagan]

Hey @EmCmEdT This should be possible with the Scroll To Field action: https://docs.budibase.com/docs/form-actions#scroll-to-field

[EmCmEdT]

@melohagan I meant the field is active for typing as if you mouse clicked into that field.
Our users have a touchscreen and a handheld barcode scanner. The easiest workflow would be if they didn't have to tap the input field and could just start scanning things. They have to fill out this form several times a day, and it is awkward for the user to have the scanner in one hand
While having to tap the screen in the other when they also could be holding their badge or the paperwork. It's not a cozy atmosphere... not a lot of places to put things and have them ready, And adding any form to the workflow is already frustrating. I don't wanna add to that frustration.

[melohagan]

@EmCmEdT when the scroll to field action is used, it will also auto focus that field for you to start typing, at least for text inputs.

The barcode scanner input may work a bit differently.

[EmCmEdT]

Thank you, @melohagan . How would I do this on page load? It doesn't seem to be working when adding the action to the "Screen" on screen load actions, so I assumed the function only scrolled, given how short my form was. However, I just tried a resize, and I realize it didn't work at all. Perhaps you can't snap to a field if it isn't loaded yet?

[melohagan]

Hey @EmCmEdT It may not be possible on page load, perhaps the form fields haven't loaded yet before the action triggers.

What I have done in the past is add it to a multi-step form. When you click the "Next step" button, the fields will have loaded by that point and will scroll into focus.