Help with autofocus

[stephenbaidu]

Can anyone help with how to autofocus the first input field on the form?

[nicklasb]

You write autofocus as if it is a build-in ASF functionality, I cannot find any such functionality.
However, it would seem like a usable one, and perhaps not that hard to implement, I would agree to that.

AFAIK, but I might be wrong, the way right now as I see it is to loop the DOM, or find the actual edit component by some $scope.$parent-combination.

[nicklasb]

Control over focusing is however a typical user requirement to my experience, and would be an valuable basic feature.

[davidlgj]

The problem is I guess timing? There is really no way today to know that the entire form has loaded if you have a "deep" complicated form. Otherwise a simple $('input, select, textarea').forcus() would work. However I think that could be fixed in the next version with the new "builder" I'm working on, then it would be possible to get an event when the form is ready.

[nicklasb]

Are you sure timing is necessary? Can't it just set focus when it first knows where to put it and then leave it there?

[davidlgj]

I just meant that if it's not in the DOM it's hard to focus it :)

[nicklasb]

Well, I don't know, but at least it is my impression that some ASF-related mechanism puts it there. :-)
(and I'd think that would be the moment to call .focus(), I am not sure how persistent focus is or if it is lost when more is added, but one could try..)

[aantipov]

Hi there
I'd like to implement auto-focus as a custom directive.
Unfortunately I haven't found the way how I can add custom directive to the field.
I tried to add it as a class via fieldHtmlClass property, but it doesn't work.

Is it possible to add custom directives to existing fields?

[nicklasb]

I just realized that this must be form option that is implemented by each field. As each field has different ways to be "focused"(it could have a quite complicated DOM structure) it is simply a matter for it to look at the options and set focus to itself when it sees fit. I think that just putting a conditioned-focus()-call in a ng-init would suffice. Perhaps a helper function in the decorator scope would be helpful, however it would not be necessary.

[nicklasb]

Closing, no activity.
Please re-open if you do have something to add.

[daniel-codrea]

A simple solution is to work with the sf-render-finished event.
Something simple like:

$scope.$on('sf-render-finished', (event, element) => {
      element.find('input').focus();
});

is working for most of the cases. This will focus the first form element it can find.

[jmddesarrollo]

Sorry for my English.
I have solved it by creating a function:

   setFocus (name) {
     const focusInput = document.getElementsByName (name);
     focusInput [0] .focus ();
   }

• Remember that collecting input by name is an array.

As I know the 'name' of the components of the form because they are in the scheme, I just have to call this function where I need and tell it the name.
Either when creating the form and / or with the submit, or where and when needed.
I hope it helps you.