Form tabs lose focus if static text is first

[Christopher_Pa4]

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?

[Christopher_Pa4 · Accepted solution]

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. 

[johnhodnefield]

Unfortunately - Chris has passed on - after a fight with liver cancer.

We (his teammates) are experiencing this issue again.  The code Chris developed did work when it was rolled out - but after a few AEM upgrades - the solution no longer works.

Anyone have any other ideas/solutions?

[johnhodnefield]

funny

slight variation - and the code works again.  The bolded text needs to be the name of the buttons.  I did have to add a text box above one of the panels that had static text first in the layout.

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

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