Form tabs lose focus if static text is first

Christopher_Pa4

07-06-2019

Hi!

We are building large, multi-tabbed panel forms for government use. Our toolbar with "Previous" and "Next" buttons is at the bottom of the page.

When we click on the tab or the buttons and go to a new tab-panel, if the first item is a form input, the browser will focus on that first item.

However, if the panel starts with text, then there is no focus on the page, and if the user was at the bottom of the form on the previous tab, they will still be there so have to scroll back to the top.

We've been looking for a way to make sure that upon changing tab panels, the user is at the top of the panel, no matter if there is a form field or static text.

Alternately, we thought we might put code on the Back and Next buttons to force to the top of the page (jQuery('html,body').animate({scrollTop:0},0);), but putting any onClick code into the rules for those buttons breaks their functionality.

Anybody run into this usability issue and find a good solution?

Accepted Solutions (1)

Accepted Solutions (1)

Christopher_Pa4

11-06-2019

I figured it out.

If you
have a Tabs on Top or Tabs on Left layout, you can put this code in on the guideRootPanel
- Initialize
event to force the page to scroll to the top when you click
those buttons.

$('.guidetoolbar').on('click', 'button.moveNext', function(){
   $('html,body').animate({scrollTop:0},0);
});

$('.guidetoolbar').on('click', 'button.movePrev', function(){
   $('html,body').animate({scrollTop:0},0);
});

And this won't conflict with the button action because it's not a direct click event. 

Answers (0)