Problem setting focus in a textBox (onSelect event)

[Estibarna]

Hello,

We have tree textbox, the second one is disabled, the first one have a 'choices url' property that response with two fields ('item' and 'desc') in the first textbobx onSelect property whe have this code:

Code: Select all

function textboxSelection(rcd) {
  changeElementValue('field1',rcd['item']);
  changeElementValue('field2',rcd['desc']);
}

textboxSelection;

After select one value the fields are populated correctly, also we need to put the focus on the third field, but we don't find how do it.

we try adding this:

Code: Select all

getObj('field3').focus();

but after select one value the cursor remain in field1.

Thanks in advance,

Sergio

[Scott Klement]

That looks correct.

Could it be a timing problem?

[Estibarna]

Thanks for your reply Scott,

We have made a test UI Rich Display that is attached to this messages with 3 fields,

field1 with this code in 'onFocus' event:

Code: Select all

console.log(Date.now() + " onFocus field 1");

field1 onSelect event:

Code: Select all

function prbSelect(rcd) {
  console.log(Date.now() + " onSelect field 1");
  changeElementValue('field2','Selected Option ' + rcd.field1);
  changeElementValue('field3', rcd.field1);
  getObj("field3").focus();
}

prbSelect;

field3 onFocus event:

Code: Select all

console.log(Date.now() + " onFocus field 3");

and this is the console log result when an opcion is selected in field1:

1578735274233 onFocus field 1
1578735278457 onSelect field 1
1578735278459 onFocus field 3
1578735278463 onFocus field 1

seems like when onSelect event is over the focus returns to field1

Thanks,

[Estibarna]

Another comment:

We found this behaviour, if you select an option using keyboard the focus goes to field3 but if you select an option with mouse the focus remains in field1

Thanks,

Sergio

[Scott Klement]

I'm not sure that I understand the example? Looking at your display file, there is no auto-complete defined on 'field1'. However, you have defined the onselect event for this widget.

The onselect event fires when an option is selected in an autocomplete, combo box or dropdown box... it won't fire at all on a textbox, otherwise.

I'm assuming this isn't the actual display that you're using since your screenshots do show the event firing. My guess from your description is that the focus is being placed back into the textbox after an item is selected. It makes perfect sense if you think about it: Clicking one of the choices with the mouse would cause the focus to be placed on the choice you clicked. (That's normal behavior, a mouse click moves the focus.) So after the item has been clicked, Profound UI has to move the focus back to the text box.

From your tests it seems that's what's happening... after a choice is selected, the onselect event fires. Here you move focus to field3. Then Profound UI gets control again and moves the focus back to input1.

Assuming this guess is right, you could fix the problem by adding a small delay to the focus like this:

Code: Select all

setTimeout(function(){ getObj("field3").focus(); }, 5);

This causes the getObj.focus to run 5ms (means 5/1000 of a second) after the onselect event ends.

[Estibarna]

Scott,

in our example we are using choice options, the behavior is the same, and the onSelect event is fired when option is selected.

Adding this little delay works fine and as we expect.

Thanks,