Set focus of input in repeating group

[marc1]

Hey,

I have a repeating group which has an input inside called ‘barcode input’

When the page loads i need this input to be set in focus. However, I can’t select this input in the elements dropdown. I believe this is because the element is in a repeating group

Is there any way around this?

[sridharan.s]

I suspect there’s a way to get around this, but probably takes some experimenting to figure out. I’d suggest playing around with putting the input in a reusable element and seeing if you can get it to set focus from a workflow within the reusable element.

Another approach may be to use javascript to set the field to be focused. I suspect there’s a way to select the input within the 1st cell of the RG (which is what you want I believe).

[oli1]

I ended up solving this with some fairly simple Javascript.

In the use case below, I’m setting the focus on the input in a newly created object in a repeating group.

Here’s how it works:

1. Make sure your app settings allow IDs on elements (instructions here)

2. Give each input field inside your repeating group (RG) a dynamically created unique ID
   

   
   
   In my app, each row in the RG is called a “Narrative” so I set the ID to be “narrative-” + the unique ID of the narrative object

Now that each input has a uniquely addressable ID we can set the focus in Javascript.

3. Add the free Toolbox plugin to gain access to the “Run Javascript” in your workflows.

4. In your workflow, create the new entry in the RG (in my case, creating a New Narrative and adding it to the RG)

5. Now you can use Run Javascript to run this code. Note, this is very simple code that could use some more error handling.

What the code is doing is creating a variable with the ID of the input, then it tries to find it in the DOM. If it does, it sets the focus.

6. Note that I put a pause of 100 milliseconds before the JS code to give time for the new element to be rendered on the page.

You’d need to modify where you use the code in your workflows if you want to use it for something else, such as setting focus on the first input of the RG. The key tho is that we now have addressable IDs so we can find them whenever we need them.

Hope this helps!

[openocean.tampa]

@oli1

instructions here

Wow! Never used javascript before, tbh was always intimidated. This was so straight forward that it worked for me first try! Thank you

[stardrive]

Holy cow this was so incredibly helpful!

I had been struggling for hours to create an elegant UX for setting input focus in a repeating group after adding a new thing. It worked like a charm.

Thank you!