Dialog box and tabbing through buttons

Use this board to ask questions or have discussions with other Rich Displays users.
Post Reply
BFoster
Profound User
Posts: 50
Joined: Fri May 24, 2019 6:26 am
First Name: Ben
Last Name: Foster
Company Name: Manhattan Assurance Company
Contact:

Dialog box and tabbing through buttons

Post by 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
Profound User
Posts: 50
Joined: Fri May 24, 2019 6:26 am
First Name: Ben
Last Name: Foster
Company Name: Manhattan Assurance Company
Contact:

Re: Dialog box and tabbing through buttons

Post by 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.
Last edited by BFoster on Tue Jan 28, 2020 11:35 am, edited 1 time in total.
DanD
Profound User
Posts: 42
Joined: Wed Jun 14, 2017 12:06 pm
First Name: Dan
Last Name: Devoe
Company Name: Boston Warehouse Trading
State / Province: Massachusetts
Zip / Postal Code: 02062
Country: United States
Contact:

Re: Dialog box and tabbing through buttons

Post by 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
Profound User
Posts: 50
Joined: Fri May 24, 2019 6:26 am
First Name: Ben
Last Name: Foster
Company Name: Manhattan Assurance Company
Contact:

Re: Dialog box and tabbing through buttons

Post by 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
Experienced User
Posts: 2711
Joined: Wed Aug 01, 2012 8:58 am
First Name: Scott
Last Name: Klement
Company Name: Profound Logic
City: Milwaukee
State / Province: Wisconsin

Re: Dialog box and tabbing through buttons

Post by 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
Profound User
Posts: 50
Joined: Fri May 24, 2019 6:26 am
First Name: Ben
Last Name: Foster
Company Name: Manhattan Assurance Company
Contact:

Re: Dialog box and tabbing through buttons

Post by 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
Profound User
Posts: 50
Joined: Fri May 24, 2019 6:26 am
First Name: Ben
Last Name: Foster
Company Name: Manhattan Assurance Company
Contact:

Re: Dialog box and tabbing through buttons

Post by 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
Experienced User
Posts: 2711
Joined: Wed Aug 01, 2012 8:58 am
First Name: Scott
Last Name: Klement
Company Name: Profound Logic
City: Milwaukee
State / Province: Wisconsin

Re: Dialog box and tabbing through buttons

Post by 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
Profound User
Posts: 50
Joined: Fri May 24, 2019 6:26 am
First Name: Ben
Last Name: Foster
Company Name: Manhattan Assurance Company
Contact:

Re: Dialog box and tabbing through buttons

Post by BFoster »

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

Who is online

Users browsing this forum: No registered users and 6 guests