Dialog box and tabbing through buttons

[BFoster]

I have a dialog box that displays text information about the function of three buttons. There are no input fields of any kind. The goal is to allow the user to use the tab key to "focus through" the buttons and when the tab key is used on the last button in the series, focus should be placed back onto the first button. Each of the three buttons has a unique tab index (1,2,3).

Per user request, when the dialog box is presented, focus must be placed onto the first button (id=ConfirmNext). This is attempted by JavaScript for the dialog box's onload event, shown below.

Code: Select all

getObj("ConfirmNext").focus();

This code does not work. When the dialog box is displayed, instead of focus being placed onto the first button, focus is actually placed outside of the browser (Firefox) such that when the tab key is pressed the browser's tab comes into focus. If I press the tab key enough times, focus is eventually placed onto the first button in the dialog box. For the 3rd and last button, JavaScript is attached to its onblur event (below) in an attempt to refocus back onto the first button (id=ConfirmNext).

Code: Select all

var ctrlKey = event.ctrlKey;
var key = event.key;
var shiftKey = event.shiftKey;

//console.log("ctrlKey=" + ctrlKey + "   shiftKey=" + shiftKey + "   key="+key);

//When tabbing out of Cancel Btn put focus on ConfirmNext  
if (!ctrlKey && !shiftKey && key=="Tab"){
  getObj("ConfirmNext").focus();
  preventEvent() ;
}

This does not work either. Instead of focus being placed onto the first button, focus is instead placed back into the browser. Again, if I press the tab key enough times, focus is eventually placed onto the first button.

Experimenting, I placed a textbox into the dialog box before the group of buttons and used JS to apply focus onto it. When the dialog box was displayed focus was on the textbox as expected. But, when the tab key is pressed while on the last button, focus is again placed onto the browser's tab.

Thanks in advance for your help.

[BFoster]

I fixed the tabbing from the last button so that focus is placed onto the first button again. I don't know why I attached the JS to the onblur event. (Need more coffee) When I correctly placed it onto the onkeydown event it behaved as expected. The only problem that still exists is the initial onload focus to the first button.

[DanD]

I have a similar issue with the initial focus.

In the record format, I tried placing the following:

setTimeout(function() {
console.log('On Load');
Button1.focus();
}, 100);

This seems to work when in Developer tools (Google Chrome). However, when out of developer tools, it doesn't.

Never got around to submitting it as a bug report because I'm likely doing something wrong. I will be curious if you are able to resolve this.

[BFoster]

I fixed the onload/focus problem by placing the following code into the onload event.

Code: Select all

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

[Scott Klement]

The reason the obj.focus() call doesn't work from the onload event is that onload runs before Profound UI sets focus. Profound UI calculates which field to place focus in so that it matches the way things were done in 5250 applications in order to make converted applications compatible with the green screens they were converted from. It figures out which field to put focus on and saves it into a variable, then runs onload, then sets focus according to that variable.

So when you set focus inside onload, it will move focus correctly -- but only for an instant, then Profound UI will move the focus elsewhere.

Running it from a timeout would work because you're adding a delay so that it runs after Profound UI's set focus... but this still causes it to set focus twice, so extra needless work is being done.

A better solution is to do this in the onload:

Code: Select all

applyProperty("ConfirmNext", "set focus", true);

The applyProperty() API has some smarts in it that detects being in onload, and updates the aforementioned variable so that when focus is set, it'll be set to the proper place.

With regards to the onblur event, you have a similar-ish problem. The blur event runs after the browser has determined that you're moving focus, but before it actually moves it. So if you set focus from onblur, it'll work for an instant, but then the browser will continue with its plan of moving the focus to the next field, so focus will once again be moved elsewhere. I don't know if applyProperty() would work for that... I suspect it would not. Instead, try using the timeout since this will cause it to run after the blur/focus has completed.

This isn't a problem with the keydown event because its not in the middle of moving focus when keydown is called. That's why your focus() call worked fine there.

[BFoster]

As mentioned: "I fixed the tabbing from the last button so that focus is placed onto the first button again. I don't know why I attached the JS to the onblur event. (Need more coffee)" but I will take your advice and use the "applyProperty" method instead. Thanks!

[BFoster]

Since you have a good handle (better than mine) on the inner workings of browsers and event firing sequences, could you point me to a good resource to read about these things?

[Scott Klement]

What I typically do is add console.log() statements to the various events, and then just try them out... then I can see the sequence in which they fire based on the order of the messages written to the console.

[BFoster]

OK, I'll give that a whirl. Thanks.