Wizard: not focus on first field upon step entry?

  • 1
  • Question
  • Updated 4 years ago
  • Answered
Is there a way to prevent a wizard from setting the focus to the first field? Thanks!
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb

Posted 4 years ago

  • 1
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Untested but maybe worth a try:

(function(skuid){       var $ = skuid.$; skuid.$(document.body).one('pageload',function() {
      $('fieldToBeGivenFocus').focus();
   });
})(skuid);
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Irvin... Thanks for the reply. Maybe I'm reading this incorrectly... It looks like this will set the focus to whatever field I put in 'fieldToBeGivenFocus'?

Unfortunately, I don't think that helps my use case. The top of my page has a large template component with a bunch of text that the user needs to read. Right now the wizard is automatically setting the focus to the first editable field, which scrolls down that page so the user doesn't see the text. each time a new step loads, I want to be at the top of the page.

This is the case for several steps in the wizard. Ideally, I'm looking for a way to prevent the wizard from setting the focus at all.
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Any answers on this?
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
There is not an easy way to make the Wizard page not have any focus at all.  The only way we thought to work around this was to turn off all input fields on the page (Make field editors read/edit).  Skuid is looking for the first field in edit mode on the page to set focus on.  If there are none,  no focus will be set. 

Then you could put a button (in a page title) at the bottom of your template that says "I got it!"  and turns the components below it into Edit mode.   Look at this forum post about the code needed for that sort of button:  https://community.skuidify.com/skuid/topics/_edit_mode_button

I know that is a work - around,  but maybe it will be sufficent.