How to move focus to next input nested in repeaters on pressing "enter" in stead of "tab"?

Ask the community
,
1

I’m making a simple addition/subtraction math-test website on an urgent basis where each question and its answer’s input field is in a repeater and a final submit button ends the test.

I want the focus to move to the next input when I press “enter” on the first. This already works with “tab” but my young/rural students might not be familiar with the “tab” key.

1276×680 28.2 KB

I could either somehow trigger/simulate a “tab” press every-time “enter” is pressed or, more preferably, move focus to the next input when “enter” is pressed, using a key-press event-listener.

The trouble is that the “context” of the key-press event contains no information (AFAIK) about the NEXT repeater. Nor do I have access to any array of repeaters or input elements in repeaters.

Please help me find a way to focus() on the next input when “enter” is pressed from the first.

2

Hi Bhavika,

There are some functions that provide a way to do this. Be sure to read the section entitled “Retrieve Repeater Item Data When Clicked” in the repeater documentation introduction .

This following example’s repeater is tied to a dataset, and the keyPress event was added from the property sheet.

export function input1_keyPress(event) {
 let nextIndex = -1;
 if (event.key === "Tab" || event.key === "Enter") {
   // get currently selected repeater item's data
   let $curritem = $w.at(event.context);
   let clickedItemData =
   $curritem("#dataset1").getCurrentItem();
   // now loop through repeater items and find that index
   $w("#repeater1").forEachItem( ($item, itemData, index) => {
      if (clickedItemData._id === itemData._id){
         // this is the one where the focus currently is
         // the input to set focus to will be the next one
         nextIndex = index + 1;
       }
       if (index === nextIndex){
          // sets the focus to the input in the next item
          $item("#input1").focus();
       }
     });
  }
}
3

Will iterating over the repeater array slow down the site too much?

Other than that concern, this solution makes perfect sense. Thank you so much for telling me about it.

4

It’s only going to fire when the user hits the tab or enter key, so it shouldn’t be much of a drag on performance. A repeater having too many rows to load would have a far greater influence on performance.